How to Zoom an Image on Mouse Hover using CSS ? - GeeksforGeeks

30 Jul, 2021
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.
<!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="https://media.geeksforgeeks.org/wp-content/uploads/20200403151026/adblur_gfg.png"            alt="Geeks Image" />    </div></body>  </html>
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.
<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>
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:
<!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="https://media.geeksforgeeks.org/wp-content/uploads/20200403151026/adblur_gfg.png"            alt="Geeks Image" />    </div></body>  </html>
Output:
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
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.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
Create a Responsive Navbar using ReactJS
Design a web page using HTML and CSS
How to position a div at the bottom of its container using CSS?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Types of CSS (Cascading Style Sheet)
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?