Add Zoom Effect To Your Blog Images On Mouse Hover

I have shared lot's of tutorials on how to add different effect to images, but now, we will be talking on how to add zoom effect to images on mouse hover.
For a demo of what we are talking about, kindly hover your mouse cursor on the image below and see the awesome effect.

DEMO:

How To Add Zoom Effect To Images

• Go to your blogger dashboard
• Click on Template > Edit HTML > Proceed
• Use ctrl F to find ]]></b:skin> and paste the following code above/before it.

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

• Click on Save template

How To Activate it On Images

Whenever you have uploaded any image in your post editor, simply switch to HTML mode and change the class from what ever it is, to zoomeffect.
Example: Your image class in post editor will be <div class="seperator", now change it to <div class="zoomeffect"

If you are adding it to any other part on your blog, you can use the following code.

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

Replace YOUR-IMAGE-URL with the link of the image you want to apply the effect to.
That's all!

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz