DEV Community

Yan Cui
Yan Cui

Posted on • Originally published at theburningmonk.com on

How to add a zoom in effect with CSS

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>
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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)