Zoom images on Mouse hover using CSS3

Today we will share CSS3 code for creating zoom effect on image hover. Enlarge image on mouse hover can be created using CSS3 scaling transformation. This effect can be easily created using few lines of code.

Zoom images on hover using CSS3

 

Demo

CSS Code:

.zoom_img img{
margin:50px;
height:100px;
width:100px;
-moz-transition:-moz-transform 0.5s ease-in; 
-webkit-transition:-webkit-transform 0.5s ease-in; 
-o-transition:-o-transform 0.5s ease-in;
}
.zoom_img img:hover{
-moz-transform:scale(2); 
-webkit-transform:scale(2);
-o-transform:scale(2);
}

HTML Code:

<div class="zoom_img" >
<img src="image.png"  title="Magify image on mouse hover using CSS" />
</div>

Instructions

Scale(2) – It increases the size of the image up to twice of its original size on mouse hover on the image. You can change these values according to your own choice.

Leave a Reply

Your email address will not be published. Required fields are marked *

19 comments