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.
<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>
.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;
}
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.
<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.
Create image zoom effect animation here
Add your image URL here and set the zooming image size.
You can customize this zooming effect by adjusting the animation duration time value.