Open In App

How to Zoom an Image on Mouse Hover using CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

The image zoom effect is used to apply zoom over an image on mouse hover or click. This type of effect is mostly used in portfolio sites. It is useful in situations where we want to show the user details on the image.

CSS transform and scale with Transition

To achieve image zoom on mouse hover using CSS, you can use the CSS property with the transform function. Apply a scale transformation to the image within the: hover pseudo-class to create the zoom effect.

Example 1: Implementation to zoom an Image on Mouse Hover by using CSS transform and scale property.

HTML
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <title>
        To Zoom an Image on
        Mouse Hover using CSS
    </title>
    <style>
        body {
            text-align: center;
        }

        .image-container img {
            transition: transform 0.3s ease-in-out;
        }

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

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

</html>

Output:

lko

Example 2: Implementation to zoom an Image on Mouse Hover bu using CSS zoom property.

HTML
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <title>
        To Zoom an Image on
        Mouse Hover using CSS
    </title>
    <style>
        body {
            text-align: center;
        }

        .image-container img:hover {
            zoom: 1.2;
        }
    </style>
</head>

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

</html>

Output:

drf

Example 3: Implementation to zoom an Image on Mouse Hover using better CSS properties.

html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <title>
        To Zoom an Image on
        Mouse Hover using CSS?
    </title>

    <style>
        .geeks {
            width: 300px;
            height: 300px;
            overflow: hidden;
            margin: 0 auto;
        }

        .geeks img {
            width: 100%;
            transition: 0.5s all ease-in-out;
        }

        .geeks:hover img {
            transform: scale(1.5);
        }
    </style>
</head>

<body>
    <div class="geeks">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200403151026/adblur_gfg.png" 
             alt="Geeks Image" />
    </div>
</body>

</html>

Output:

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.



Last Updated : 13 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads