Enlarge images on Mouse hover using CSS

CSS  is a very powerful tool in modern Web Design techniques. It provides various new effect and transition in the world of web design. This guide is about enlarging image using scale transformation of CSS on mouse hovering over them.It is very easy method  and just requires only few lines of code. .

Enlarging of image on mouse hover using CSS

CSS Code:

.zoom_img img{

height:50px;
width:50px;
-moz-transition:-moz-transform 0.1s ease-in; 
-webkit-transition:-webkit-transform 0.1s ease-in; 
-o-transition:-o-transform 0.1s 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="skype.png"  title="Magify image on mouse hover using CSS" />
<img src="facebook.png"  title="Magify image on mouse hover using CSS" />

<img src="twitter.png" title="Magify image on mouse hover using CSS" />
<img src="rss.png" title="Magify image on mouse hover using CSS" />

</div>

Note:

• Height and Width in CSS code specifies the height and width of images in normal mode


• 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.


• Enjoy.