The CSS “transition” property is used to add effects on the different HTML elements, such as changing the width, height, size, and position of the elements. By using this property, you can also zoom an image on mouse hover with the combination of transform property and :hover pseudo-class element.
The purpose of this article is to teach you the procedure of zooming in on an image on a mouse hover. So, let’s start!
How to Zoom an Image on Mouse Hover Using CSS?
The “transition” and “transform” properties of CSS are used for zooming an image on a mouse hover. Before jumping into the implementation, we will discuss the mentioned properties one by one!
CSS “transition” Property
The “transition” property is utilized to change the value of CSS properties such as width, height, opacity, and transform within a specific period of time. It is a shorthand property of four other properties.
Check out the syntax of the transition property.
Syntax
transition-timing-function transition-delay
The description of the properties mentioned above is given below:
- transition-property: It is utilized to set the transition to any CSS property, such as width, height, opacity, transform, and many more.
- transition-duration: It is utilized to adjust the transition’s duration.
- transition-timing-function: It is used to set the speed of the transition.
- transition-delay: It specifies when the transition starts or delays.
CSS “transform” Property
For the 2D and 3D transformation of HTML elements, the “transform” property of CSS is used. By utilizing this property, you can modify the shape and size of the elements. It also allows an element to rotate, skew, and scale.
Syntax
The syntax of the “transform” property is:
The description of the transform property is given below:
- none: It is used to set no transformation of the elements.
- transform-function: It is utilized to set the function of the transform property such as rotate(), skew(), translate(), and scale(). Moreover, the scale() function resizes the element in horizontal and vertical directions.
Example 1: Zoom an Image on Mouse Hover
To zoom an image on a mouse hover, first, add an image in the HTML, then apply the hover effect to it.
Step 1: Add Image in div
To zoom an image on mouse hover using CSS, first, we will add an image in the “div”. To do so, use the <img> tag and set the source of the image as “image.png” inside the <div>.
HTML
Step 2: Style div
In CSS, we will use “div” to access the div we created in HTML then set the height of the div as “250px” and the background color as “rgb(134, 240, 227)”. Furthermore, we will adjust the border around the div by setting the width as “10px”, style as “ridge”, and color as “rgb(2, 141, 127)”.
CSS
height: 250px;
background: rgb(134, 240, 227);
border: 10px ridge rgb(2, 141, 127);
}
Step 3: Set Position of Image and Apply “transition” Property
In the next step, set the position of the image by using the padding as “80px” and “160px”. We will use the width as “150px” to adjust the size of the image. After that, apply the transition property to the image by setting the value of the transition property as “transform” and transition duration as “0s”:
padding: 80px 160px;
width: 150px;
transition: transform 0s;
}
Note: Values of the padding are set as “80px” represents the padding from top and bottom, and “160px” indicates the padding from left and right.
Step 4: Zoom an Image Using the “transform” Property on Hover
Now, we will use “.img:hover” to link the image with the hover pseudo-class element. As a result, hover will be applied to the image. Next, to zoom an image on mouse hover, we will utilize the transform property and set the value of the scale function as “(1.9)” to resize the image in both horizontal and vertical directions:
transform: scale(1.9);
}
As you can see that the image is zoomed when the mouse over on it:
Let’s move to the next example, in which we will zoom a gif on mouse hover.
Example 2: Zoom a Gif on Mouse Hover
First, we will add a gif in the HTML using the <image> tag and specify its gif source as “GIF.gif”:
We will style the div the same as the previous example. After that, set the position of the gif using the padding as “50px” and “200px”:
padding: 50px 200px;
width: 150px;
transition: transform 0s;
}
Next, we will used “img:hover” and set the value of the scale function as “1.6”:
transform: scale(1.6);
}
Upon doing so, the gif will get zoom-in when mouse over on it:
That’s it! We have discussed the method of zooming an image on mouse hover.
Conclusion
To zoom an image on a mouse hover “transition” and “transform” properties of CSS are used. First, apply the transition property on the image and set the value as transform. Then in the “:hover” pseudo-class element, use the transform property and set the value of the scale() function. In this manual, we learned the method to zoom an image on mouse hover using CSS and provide examples of it.
