0:00
Hi guys, welcome back to the new video of Easy Tutorial
0:04
Today in this video you will see how to add 3D effect on your website
0:08
As you can see on my computer screen here I have one image and one text over this image
0:13
When I take cursor on this image, this image and text is rotating in the direction of cursor movement
0:19
This text is adding 3D effect on mouse hover. You can create this type of mouse hover effect in just 5 minutes
0:27
So before starting please like this video and subscribe to this video and subscribe. this video and subscribe easy temples if you are new on my channel
0:33
Now let's start this video. First I have one folder here and in this folder I have one HTML file and one
0:46
CSS file and one image. Now I will open my text editor
0:53
It is Brackets Editor so this is my HTML file and this one is CSS file
0:58
You can see I have already connected the HTML file with CSS with this line of code
1:06
Now we will come to the body tag and here we will create one div and the class name I am using Hero
1:16
Here we will add one more div and the class name is Inner
1:28
Let's copy the first class name and come to the CSS file, write it here
1:36
Here we'll write height, 100 VH, and Overflow X hidden
1:48
Let copy the second class name Inner come to the CSS file again write it here Let add some margin 100 pixel auto
2:03
Width it will be 500 pixel, height also 500. Background image, URL and the image file name
2:19
Then background size it will be cover and background position center
2:29
Position relative. Here we'll add box shadow also
2:48
Now we'll open the estimate. file with Google Chrome so that you can see one image over this web page
3:02
Now just come back to the code again. In the HTML file here we will add one title so I am using H1 and the title is over me
3:16
the web page and you can see this title over this image
3:22
Now come back to the CSS file, copy it, then write H1
3:31
Width it will be 250 pixel, text align center, font size 50 pixel, color white
3:43
One size 50 pixel color white Border 2 pixel solid white left 50 top 50 then position absolute
4:03
And transform, translate x it will be minus 50%, and translate y also
4:16
Just save these changes and reload the web page. Now you can see this text in the center of this image
4:27
Now we need to add J-Qary link. So search J-Qary CDN on Google
4:42
Here you can see J-quiry. Just click here and copy this script
4:54
Copy and add it into the head of HTML file. Remove this part, that's it
5:03
Now we need to add one JQQaity plugin. So come to this website, GitHub, you can find this link in the description
5:15
Here you can see the creator of this code
5:25
Scroll on this page and you can see this CDN, just copy this one
5:38
And come to the HTML, just go to the HTML file. up of this closing body tag we will write a script SRC and paste this URL
5:53
Then a script close. Now come here in this div and here we will add data tilt
6:11
That's it, save these changes and now reload the webpage. Here you can see this mouse hover effect on this image
6:32
Now we have to add some effect on this text also. So come back to the CSS file and here we will add Transform style Preserve 3D
7:01
And scroll down and here just copy this one and paste it again
7:11
So this will be translate Z 50 pixel
7:24
Again refresh the webpage and you can see 3D effect for this text
7:29
So this was very easy to add this type of mouse hover effect on your website
7:33
If you have any doubt about this video you can ask me in the comment section and please
7:37
like this video. Thank you so much for watching this video. Thank you
