How to Zoom an Image on Mouse Hover using CSS ?

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.

There are two possible ways to create a mouse hover effect.

  • Using JavaScript
  • Using CSS

In this article, we will see how to zoom an image on hover using CSS. This article contains two sections of code. The first section contains the HTML code and the second section contains CSS code.

HTML Code: In this section, we will use HTML to create a basic structure of Image Zoom on hover effect.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
          
    <title>
        How to Zoom an Image on
        Mouse Hover using CSS?
    </title>
</head>
  
<body>
    <div class="geeks">
        <img src=
            alt="Geeks Image" />
    </div>
</body>
  
</html>

chevron_right


CSS Code: In this section, we will use some CSS property to Zoom an Image on mouse hover. To create a zoom effect, we will use transition and transform property.



filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Complete Code: In this section, we will combine the above two sections to create an Image Zoom effect on mouse hover using HTML and CSS.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
          
    <title>
        How 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=
            alt="Geeks Image" />
    </div>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.