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:

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

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:

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:

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.

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