Today I am going to teach you how to add Zoom images on mouse hover in blogger blogger. It is very responsive It is made with pure CSS no jquery
How to add this to blogger ?
- Go to template>Edit HTML
- Search for ]]></b:skin>
- Paste the following code above it
.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);
}
- Go to layout>add a gadget
- Paste the following code
<div class="zoom_img" >
<img src="YOUR IMG LINK HERE" 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.
EmoticonEmoticon