html

How to Zoom an Image on Mouse Hover Using CSS

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: transition-property transition-duration
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:

transform: none|transform-functions

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

<div>
  <img src="image.png">
</div>

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

div{
  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”:

img {
  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:

img:hover {
  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”:

<div>
  <img src="GIF.gif">
</div>

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

img {
  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”:

img:hover {
  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.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.