How to Zoom an Image on Mouse Hover using CSS?

Last Updated : 07 May, 2025

CSS plays a vital role in styling modern websites, with over 90% of sites using it for visual effects and responsive layouts. One popular effect is image zoom on hover, which enhances user experience and adds visual appeal.

In this article, you’ll learn three simple ways to create image zoom effects using CSS, from basic scaling to enhanced styles with shadows and transitions.

Here are three different ways to zoom an image on mouse hover in CSS:

1. Using CSS transform and scale Property

The most common way to implement image zoom on hover is by using the CSS transform property along with the scale property. This method allows you to enlarge the image when the mouse hovers over it, creating a smooth zoom effect.

index.html

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<!--Driver Code Ends-->

    <style>
        body {
            text-align: center;
        }
        .image-container img:hover {
            transform: scale(1.2);
        }
    </style>
</head>

<!--Driver Code Starts-->
<body>
    <div class="image-container">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200403151026/adblur_gfg.png"
            alt="Geeks Image" />
    </div>
</body>

</html>
<!--Driver Code Ends-->

2. Using CSS zoom Property

The zoom property is another way to implement the image zoom effect. Although it's not part of the CSS standards and may have limited support, it can still be used in many cases where cross-browser compatibility is not a concern.

index.html

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            text-align: center;
        }

        .image-container img:hover {
            zoom: 1.2;
        }
    </style>
</head>
<body>
    <div class="image-container">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200403151026/adblur_gfg.png" 
             alt="Geeks Image" />
    </div>
</body>

</html>

3. Enhancing the Zoom Effect with Additional CSS Properties

To create a more refined zoom effect, you can combine CSS properties like scale, box-shadow, and border-radius. This method improves the visual appeal by adding shadows and smooth transitions.