How to Zoom Image on Mouse over Using CSS

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

With Defining Custom Width and Height of an Image


You can zoom image on mouse over with defining custom width and height of an image as given on 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 over.


Instead of specifying on pixel, you can also give with and height in percentage as given on 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 over.


With Using CSS Transform Property on Image


You can resize HTML elements using scale function in 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 grater than one larger.

Syntax:

transform:scale(number, number);

Example:

You can zoom image on mouse over with assigning CSS Scale value on transform property on an image as given on 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 an image below will be scaled to double size on mouse over. 


You can also zoom image differently on each direction with specifying different values on it 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:

The size of an image below will be scaled to 1.5 size horizontally on mouse over.


With Using CSS Zoom Property on Image


Zoom property is used to Zoom in or out on an element
Syntax: float | percentage | normal
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 image on mouse over with using CSS Zoom property on an image as given on 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 browser.