0:00
Hi guys, welcome back to my new video and today in this video you will learn how to add
0:05
gradient color hover effect on website using HTML and CSS step by step
0:10
As you can see on this website design, when I move cursor over this image, then a linear
0:15
gradient color is moving on this image. This linear gradient color moves from the bottom right corner to the top left corner of the website
0:25
You will learn to add this type of hover effect on website in just 5 minutes using HTML and
0:29
and CSS. So before starting this video, please hit the like button and subscribe to my channel Easy Tutorials
0:36
if you are new on my channel. Now let's start this video
0:41
Here I have this folder and in this folder I have one index
0:44
dot HTML file and one style. CSS file and one image that I will be using on the website
0:51
Now I will open my text editor which is blackouts editor. So this is the HTML file I have added basic HTML structures
0:59
and this one is the CSS file. In the HTML file I have added title tag and link tag to connect the HTML file with this CSS file
1:10
Now we will write code in the body tag so here we will create one dip with the class name container Now we will add one title in H1 So the title is website Hover effect CSS
1:26
Let's open this HTML file with web browser so you can see this title on the web page
1:34
Let's come back to the HTML file and copy this class name container
1:38
We will use this class name in the CSS file. Write it here and here we will add height and width
1:44
Next we will add background URL and the image file name. So it is background
1:51
You can see this image in the folder. After that we will add background position, it will be center and background size, it will
2:00
be covered. Then write position relative, that's it. After that you can see this background image on the complete web page and this title in
2:09
the corner. So let's come back and copy this one, then write H1
2:14
For this title we will change the color, then we will change the font size and font family
2:19
Position will be absolute and bottom, then left and transform translate x minus 50%
2:30
Now you can see this title over here at the bottom. Next we will add one more div in the HTML file so I will add one div before this title And let add one class name in a container
2:49
Now just copy this class name inner container, write it here in the CSS file
2:54
For this one we will add width and height. Then we will add back down
3:00
So it will be a linear gradient color. So here we will add one angle, 135
3:05
degree then color code rgb a zero zero zero point four then it will be 0% then we'll
3:14
add the another code and 25% then the third color code and it will be 50
3:22
then again one more color code and here we will write 75% then add one more
3:31
color code and it will be 100% So after adding this background, let's add position absolute, top 0 and left 0
3:44
Then write background repeat, no repeat. Then background size, let's add 400% and 400%
3:55
After that let refresh the webpage and you can see this dark color on this image If I change this one I will make it as 100 100 You can see these three colors
4:09
Let's make it 200. Again you can see the difference. So let's keep it 400%
4:18
After that, we will copy this class name container, write it here and here we will add hover
4:24
Then write the inner class name which is inner class. container so we have to change the background position on hover so here I'm adding
4:32
background position 100% and 100% and in this inner container we will add
4:40
transition it will be for two seconds like this after that just refresh the
4:47
web page and you can see if I move cursor over this image this gradient color is
4:52
moving from the bottom right corner to the top left corner and this type of linear gradient hover effect looks very
5:02
beautiful on your website so it was very easy to add this type of hover effect
5:06
using HTML and CSS I hope this video will be helpful for you if you have any
5:11
question you can ask me in the comment section and please like and share
5:14
this video and also subscribe my channel easy tutorials to watch more videos like
5:18
this one thank you so much for watching this video
