Mouse Over Zoom Effect For Blogger Picture Post

Mouse Over Zoom Effect For Blogger Picture Post 

Hello Bloggiyan! If You have image gallery in your blog or many picture stock here is a stylish gift for you. This is pure Css tutorial,it will help you to make your blog attractive,if you are running photography blog then this effect is best for you. Whenever User Move mouse over the image the image will automatically enlarge in size and after removing mouse it will come back in its own original position.
Above Is animated preview of Picture Zoom Effect Widget for blogger.

Easy Step To Add Mouse Over Pic Zoom Effect Into Blogger.

Paste the following Css code above ]]></b:skin> in your blog html code section.If you don't know how to paste Css then go to Template>Edit HTML>And there find (ctrl + f) ]]></b:skin> and paste following code above it.

.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
}
.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
opacity: 1;
}

Done Save

Adding Effect Over Image 

Now You need to add image, select image in blogger where you want to add this effect and follow below steps :

<a class="hovergallery" href="Image-URL"><img src=" Image-URL " /></a>

Replace Image-URL with your image in which you want zoom hover effect.

After Adding Image URL place the code where you want to display this image.

Post Your Comments And Ideas