Add Zoom Hover Effect To Blogger Images, Zoom Effect on Image for Website

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 any one mouse-over the image the image will automatically grow in size and after removing mouse it will come back in its own position.

If you want to add this effect to your blog then follow below steps-

Live Demo

Adding CSS Code

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

Now we 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.

If You Are Facing Any Problem Feel Free To Ask By Commenting below.