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">
  <img src="...">

When it’s hovered over, the <img> 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 <figure> 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 :-)


Learn to build Production-Ready Serverless applications

Want to learn how to build Serverless applications and follow best practices? Subscribe to my newsletter and join over 5,000 AWS & Serverless enthusiasts who have signed up already.