How To Add Zoom Effect in Blogger Images

How to add zoom effect in your blog?

1. go to Blogger Dashboard > Template
2. Download a copy of your template
3. Now click on Edit HTML
4. Hit Proceed button
5. Check Expand Widget Templates checkbox

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

}

 7. Click on Save the 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!