Adding Zoom Effect To Images On Mouse Hover

You may have seen images zooming out on mouse hover on many professional blogs and websites. It is one of the simplest ways to make your blog attractive, that too without affecting the loading speed of your blog. I've seen many peoples using jQuery to zoom the image, but it is completely rubbish because it will surely affect the loading speed of the blog.  Here I am going to share with you the trick to add zooming effect using a Css trick. You can hover your mouse over the below image to see the zoom effect.

Demo

Adding Zoom Effect To Images

1) Go To Your Blogger Dashboard Click > Template > Edit HTML > Proceed:

2) Using Ctrl+F Search For ]]></b:skin> and just below it paste the following Code:

.zoomeffect img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
}

.zoomeffect img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}

3) Click on "Save template" button!

4) Now when you want to apply zoom effect for an image use the below code:

<a class="zoomeffect" href="IMAGE-URL" target="_blank"><img src="IMAGE-URL" /></a>

 

Note:

1) Replace "IMAGE-URL" with the URL of the image!

That's it! Now enjoy the zooming effect for the images on your blog!