0:00
Hi guys, welcome back to the new video of EZ tutorials and today in this video you will
0:04
see how to add a beautiful hover effect on image using HTML and CSS
0:09
As you can see on my computer screen, when I take cursor over this image
0:13
the image divides into four equal parts. Then move upwards one by one and reveal the hidden content
0:20
When I take cursor away from this image, these images again comes down at its original position
0:26
and hide the content. So you will learn to make this awesome image hover effect in this video
0:31
using HTML and CSS. So before starting this video, please hit the like button and also subscribe if
0:38
you are new on my channel. Now let's start this video. So here I have one folder and in this
0:44
folder I have one image, one HTML file and one CSS file. Now I will open my text editor which
0:50
is brackets editor. So this is my HTML file and this one is CSS file. You can see I have already
0:56
connected HTML file with CSS with this line of code. Now we will come to the body area and here
1:03
we will write div class and I'm writing the class name card. In this div we will add span, span open
1:11
and close tag. Let's copy this class name card and write it into the CSS file and for this one we
1:18
will add width 360 pixel and height also 360 pixel. Background it will be black
1:30
Next I'm adding box shadow here. Then margin 10% from top and bottom, auto from left and right. Next position relative
1:41
Then I'm writing border radius, it will be 10 pixel. Now we'll come back to the folder again and open this HTML file with Google Chrome
1:58
So you can see this box over here in black color. Let's copy this span
2:04
and write it into the CSS file. Before that we'll put this class name also
2:15
For this span we'll write height 100% and left it will be 0. In the background we will add
2:24
image so I'm using url and the image file name. Position it will be absolute
2:29
We will add width also it will be 100%. Now you can see one image on this box
2:38
Let's come back to the CSS file again and copy and paste it again. Here we will write nth child 1
2:46
For this one we'll add z index 10, width 25% and remove the width from here. That's it
2:56
Reload the web page and you can see this image only for 25% of width
3:03
Now just duplicate this one three times so that we will get four span
3:08
And come back to the CSS and duplicate this code and here we will write
3:15
2, 3 and 4. So we have four span. For the second one we will write width 50
3:24
width 50%. For third one 75% and last one it will be 100%
3:33
And z index we will change 9, 8 and 7. Let's reload the web page. Now here you can see a
3:40
single image which is actually four parts of one image. Next we will add hover effect
3:47
For that just copy this one and here we will write hover
3:54
So when we take cursor over this card we'll add transform translate y minus 100%
4:05
Transition 0.5 seconds. Let's reload the web page and when we'll take cursor over this card you can
4:13
see this complete image is moving upward by 100%. But all the parts are moving at same time so we
4:23
have to add some delay. And here we'll copy this one and write nschild 1 to select the first span
4:35
And for the first one we'll write transition delay so it will be 0.3 seconds
4:45
And let's duplicate it make it 2 and here delay 0.2 seconds. Now for the next one
4:52
transition delay is 0.1 second and for the last one transition delay is 0
4:58
And for the last one transition delay is 0. That's it. Let's reload the web page and you can see these all four parts are moving one by one
5:14
Right now it is moving very fast so we'll come back to the css and we'll change the value
5:19
So here we'll write transition one second and delay 0.8, 0.6 and this one 0.3. Let's see again. Now it is moving very slow so that you can see it clearly
5:36
that all blocks are moving one by one. When I take cursor away from this card you can see all
5:42
images parts comes down at same time so again we have to add some delay while coming down
5:48
So come back to the css file and here we'll write transition one second
5:56
and in this span we'll add transition delay 0. Let's copy and paste it here it will be 0.3 second and for the next one 0.6 seconds
6:19
And this one 0.8 seconds. Let's reload the web page and you can see these images moving upward
6:26
one by one and again coming down one by one. So this hover effect is working nice. Next we have
6:33
to add some content also. So just come back to the html file and here we will create one div
6:39
and the class name I'm writing content. So in this div we'll add one title so I'm using h2
6:45
So the title is easy tutorials channel. Let's add some text in p tag
6:54
Subscribe easy tutorials youtube channel to watch more videos on website designing, digital marketing and graphics designing
7:08
Let's copy the class name content and write it into the css file
7:12
Here we'll write color it will be white and text align center and let's add some padding 80 pixel and 20 pixel
7:31
Width 100 percent, height 100 percent and box sizing border box. Let's reload the web page. Now you can see this content is hidden when I take cursor over this
7:43
card these images moves upward and reveal the content. Now come back to the css and here we'll write content and p for the text. So color will be 999
7:59
Now you can see gray color for this text. After this p we'll add one link also so I'm using a href and the link text is read mode
8:16
Here we'll write content a and the text is read mode. Here we'll write content a
8:28
Width 100 pixel and text decoration it will be none. Border radius 50 pixel
8:41
and border 1 pixel solid and white color. Display it will be block and we'll add margin auto
8:51
Padding 10 pixel color white. Let's reload the web page. Now you can see one button after this text
9:09
Right now you can see this content is not moving. We have to move the content according to the
9:13
image movement. So we'll come back to the css and here in content we'll add
9:20
transform translate y 100% and transition 2 seconds. Now we'll write card hover then content
9:42
Just copy this one transform and write it here translate y 100
9:49
it will be 0%. Let's come to the card also and here we'll write overflow hidden
9:58
Then reload the web page. Now you can see the content is also moving
10:03
according to the image movement. It is going up with the image and when image comes down it goes
10:10
down. So this was very easy to add this type of effect on your website using html and css
10:17
I hope this video will be helpful for you. If you have any doubt you can ask me in the
10:21
comment section and don't forget to like and share this video. Thank you so much for watching this video
