As I rebuild the landing page for the AppSync Masterclass, I wanted to add a zoom-in effect to some of the images, like this:
After some googling and a bit of experimentation, this is what I ended up with.
<figure class="img-hover-zoom">
<figcaption>...</figcaption>
<img src="...">
</figure>
When it’s hovered over, the tag would scale up. To make this transition smoother, you can use CSS transition.
.img-hover-zoom img {
transition: transform 0.2s ease-out;
}
.img-hover-zoom:hover img {
transform: scale(1.2);
}
But this alone isn’t enough, because the image would overflow from the parent container.
So for the tag, use overflow: hidden
to stop the overflow.
.img-hover-zoom {
overflow: hidden;
}
And voila, you get a nice zoom-in effect when hovering over an image :-)
The post How to add a zoom in effect with CSS appeared first on theburningmonk.com.
Top comments (0)