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.

HTML

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

CSS

.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);
}

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 *