Create Simple CSS3 Zoom In Effect On Mouse Hover

In this tutorial, I will show you how to quickly implement the zoom in effect on mouse hover an image with very simple css3. Why do you need this effect? You might already have the answer before googling it, right? It's simple but cool. Maybe the visitors will more likely to click on it. You can try it out by hovering on one of the images above.

First you need to create a container, in this demo it has the class .demo-container. Then you put an img inside it. I use a picsum photo in this demo but you can use any of your own. The anchor tag is optional and is not required for the effect to work.

<div class="demo-container">
  <a href="#">
    <img src="https://picsum.photos/seed/b/720/400" />
  </a>
</div>

This container class has the overflow set to hidden so that when the image is zoomed in it will still be inside the container.

.demo-container {
  overflow: hidden;
}

The img has css3 transition duration of 0.6 second with ease in and out. The image max width is 100% so it is always inside the container.

.demo-container img {
  -webkit-transition: 0.6s ease;
  transition: 0.6s ease;
  max-width: 100%;
}

And here comes the magic secret. When the container is hovered, we will transform the image by scaling it larger. In this demo I use 1.4 but you can change it to whatever number you like. And that's it.

.demo-container:hover img {
  -webkit-transform: scale(1.4);
  transform: scale(1.4);
}