How to Zoom Images on the Mouse Hover Using CSS

You can change the size of an HTML element using different properties like width and height, scale, zoom, etc. in CSS. This effect can be applied to different events like click, focus, hover, etc. You can use different methods to zoom Images on the Mouse Hover using CSS. You can also use these methods for changing the view size of the image or zooming it.

Read Also: How To Create Image Slideshow With Resize Effect

Defining Custom Width and Height of an Image

You can zoom images on the Mouse Hover by defining the custom width and height of an image as given in the example below.

CSS Code:

.img {width:250px;height:200px;border:brown solid 2px; text-align:center;}
#img1:hover {height:250px;width:300px;}

HTML Code:

<img class="img" id="img1"src="image1.jpg">

Preview:

The height and width of an image below will be set to 300px and 250px respectively on Mouse Hover.

Instead of specifying the pixel, you can also give and height in percentage as given in the example below.

CSS Code:

.img {width:250px;height:200px;border:brown solid 2px; text-align:center;}
#img2:hover {height:30%;width:30%;}

HTML Code:

<img class="img" id="img2"src="image2.jpg">

Preview:

The height and width of an image below will be set to 30% of the size parent element on Mouse Hover.

Using CSS Transform Property on Image

You can resize HTML elements using the scale function in the transform property of CSS. The transformation function scale(number, number) scales the object by the scale values specified. Where 1 is the same scale of the object and numbers less than one scale the objects smaller and greater than one larger.

Syntax:

transform:scale(number, number);

Example:

You can zoom images on the Mouse Hover by assigning a CSS Scale value on the transform property on an image as given in the example below.

CSS Code:

.img {width:250px;height:200px;border:brown solid 2px; text-align:center;}
#img3:hover {
-webkit-transform:scale(2,2);
-moz-transform:scale(2,2);
-ms-transform:scale(2,2);
transform:scale(2,2);}

HTML Code:

<img class="img" id="img3"src="image3.jpg">

Preview:

The size of the image below will be scaled to double the size of Mouse Hover.

You can also zoom images differently in each direction by specifying different values on them as given below.

CSS Code:

.img {width:250px;height:200px;border:brown solid 2px; text-align:center;}
#img4:hover {
-webkit-transform:scale(1.5,1);
-moz-transform:scale(1.5,0.1);
-ms-transform:scale(1.5,1);
transform:scale(1.5,1);}

HTML Code:

<img class="img" id="img4"src="image4.jpg">

Preview:

Using CSS Zoom Property on Image

Zoom property is used to Zoom in or out on an element.

Where a percentage value of 100% or a float value of 1.0 is the same as normal. A value of 200% or 2.0 is equivalent and it makes the size double.

Example:

You can zoom images on Mouse Hover by using the CSS Zoom property on an image as given in the example below.

CSS Code:

.img {width:250px;height:200px;border:brown solid 2px; text-align:center;}
#img5:hover {zoom:200%;}

HTML Code:

<img class="img" id="img5"src="image5.jpg">

Preview:

This property will only work for IE browsers.

Read Next: How To Create Image Slideshow With Rotating Effect