2/100 CSS Shorthand trick for fast coding #2
Hello friends, let me show you a cool CSS effect.
As you can see here, when I hover over the photo, it zooms in. In today's video, we'll learn how to achieve the same effect.
To do this, we've created an "index.html" file. Let's write the boilerplate code for it, and in the title, we'll name it "CSS Hover Effect."
Now, we'll link our "style.css" to the HTML file.
For this effect, we'll use a "div" with the class name "container," and inside it, we'll place an "image" tag.
We have a downloaded image here, so we'll use that.
Now that the image is added, let's apply some styling to it.
First, I'll set the margin and padding to 0, so the default spacing is removed.
As you can see, the space is gone.
Next, we'll apply some styling to the "container" class.
We'll set its position to "absolute" and add "top" and "bottom" values of 35%, so it aligns somewhat to the center.
As you can see, it's now slightly centered.
Now, let's style the "img" tag.
So, here's the "img" tag.
But before that, I want that when I hover over the image, it should transform and scale to 1.2.
We can say that "scale" is used for zooming in or out.
I want a zoom-in effect when I hover over the image.
See, when I hover over it, the effect is there, but the problem is that the image is going outside the div.
To fix this, we need to add "overflow: hidden" to the "container" to prevent the image from going outside.
Now, the image stays within the div, but when the effect is applied, it happens abruptly.
To make it smoother, we'll add a "transition" to the "img" tag with "all ease" and a duration of 0.5 seconds.
Now, see how smoothly it works.
Now, it's all set!
Thanks for watching.
Subscribe Our Channel and also Like, Share, and Comment.
Hi, thanks for watching our video about CSS trick!
In this video we’ll walk you through:
image hover effect
animation
you can also watch our css trick video :-
• 1/100 CSS Shorthand trick for fast co...
you can also access our playlist :-
• CSS Tricks
Watch video 2/100 CSS Shorthand trick for fast coding #2 online without registration, duration hours minute second in high quality. This video was added by user ezDeveloper 25 July 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 4 once and liked it people.