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.

HTML

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

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

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 *