CSS Mouse Hover Image Zoom Effect Animation

Creating a zoom effect animation an image when the mouse hovers over it can be achieved using CSS. This effect is often used by e-commerce websites to show more detail in an image. Using CSS properties such as transform and transition, the image can smoothly zoom in or out when the mouse hovers over it.

Here's a simple example of CSS image zoom effect animation

Hover your mouse over the images to see the zooming animation

Create a <div> tag and inside it two <img> tags. Set a small image for the first image tag. For the second image, put a larger size image. Apply the provided CSS animation code to animate the second image as shown below. When you hover your mouse over the first image, you will see the zoom-in effect of the second image.

HTML

<div class="zoom-effect">
  <img class="img-small" src="/images/demo/3.webp" alt="image">
  <img class="img-zoom-animation" src="/images/demo/3.webp" alt="image">
</div>

CSS

.img-small {
  width: 100px;
 }
.img-zoom-animation {
  position: absolute;
  width: 0px;
  z-index: 10;
  transition: width 0.3s linear 0s;
 }
 .img-small:hover + .img-zoom-animation {
  width: 400px;
}

Try it Yourself Run code

Use more images for this animation

When using more images for this zoom animation, sometimes large image takes longer to load that affect your page loading performance. So you need to modify your HTML codes and here is the solution for that.

Modify the HTML code to include an attribute 'data-big' within the second <img> tag and assign the URL of the big image URL to the 'data-big' attribute.

HTML

<div class="zoom-effect">
  <img class="img-small" src="/images/small-image1.png" alt="image">
  <img class="img-zoom-animation" src="/images/small-image1.png" data-big="/images/big-image1.png" alt="image">
</div>

<div class="zoom-effect">
  <img class="img-small" src="/images/small-image2.png" alt="image">
  <img class="img-zoom-animation" src="/images/small-image2.png" data-big="/images/big-image2.png" alt="image">
</div>

...

Using JavaScript, replace the 'src' value of the second image tag and add the value of the 'data-big' attribute.

JavaScript

window.addEventListener("load", () => {
    const zoom_images = document.querySelectorAll(".img-zoom-animation");
    zoom_images.forEach( img => {
        if (img.hasAttribute("data-big")) {
            img.src = img.getAttribute("data-big");
            img.removeAttribute("data-big");
        }
    });
});