How to enlarge an image on hover in HTML

Overview

In this Answer, we'll learn to enlarge an image on hover using HTML coupled with CSS. Developers usually do this to make their webpage more appealing and user-friendly. Animations are generally fascinating when used appropriately and significantly affect the user experience.

Here's a visualization to show what we are trying to achieve:

On mouse hover, the small image on the left should enlarge as seen on the right

Steps

We can take the following steps to address our problem statement:

  1. First, use the <img> tag of HTML to add an image to the code.
  2. Then make use of the :hover pseudo-class and change the CSS accordingly to enlarge the image.
  3. We must also use the transition and transform CSS properties to achieve our goal.

The transition property is used to control the speed of the animations that are applied using the transform property.

Whereas using the transform property along with the scale property is required to enlarge the image.

Syntax

//This is used to add an image in the code
<img src='img_src.jpg'>

Here, the src attribute in the <img> tag is used to define the source of the image.

The CSS properties that are mentioned above are changed using the syntax shown below:

//This is used to control the animation speed and its duration
img{
transition: property duration timing-function delay|initial|inherit;
}
//This property is used to change the properties of the image on hover
img:hover{
transform: none|transform-functions| initial|inherit;
}

Note: To explore the transition property of CSS, please visit this link.

Let's now understand some values that are used along with the transform property :

  • transform-none: This is usually applied when we don't want to specify any transformation on an HTML tag .
  • transform-functions: These functions specify the actual transformations and are used to apply a 2D or 3D transformation on HTML elements. Some of which are listed below:
    • Scale: Often used to reduce or increase the size of the HTML element by a specific scale.
    • Rotate: This is used to rotate the HTML element in the clockwise or anti-clockwise direction.
    • Skew: This is used to apply the skew transformation to the HTML element.
    • Move: This is used to reposition a particular HTML element in a specific direction specified by the magnitude provided by the user.
  • transform-initial: This sets the property to its default value.
  • transform-inherit: This is used to inherit the transform property from the parent element if the HTML element we use is an child element.

Example

The following code snippet helps us understand how to enlarge an image on hover:

Note: In order to view the source code please refer to the HTML and CSS tabs in the code widget below.

Enlarging an image on hover in HTML

Explanation

The following is the explanation of the code that is present in the HTML file:

  • Lines 5–7: We use the <div> tag to enclose the <img> tag so the image could be centered as shown in the output above. Therefore, the <div> element acts as the parent container that encapsulates the image.

The following is the explanation for the code contained within the CSS file:

  • Lines 1–6: This code is applied to the parent <div> in the HTML file and it helps in centering all the child elements of the div such as the <img> tag in our case.
  • Lines 7–15: We use the transition property of CSS to control the speed of the animation that is applied to the img element in our HTML file.

Note: The width and the height properties of CSS are used to change the size of the <img> tag.

  • Lines 16–18: We use the :hover pseudo-class and the transform property along with the scale attribute to signify the amount of scaling required and helps us achieve our result.

  

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved