DEV Community

Yan Cui
Yan Cui

Posted on • Originally published at theburningmonk.com on

1

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.

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free