How to add On Hover Zoom Effect on Photo

• LIVE DEMO

1. Log in to Blogger
2. Now go to "Template"
3. Find next code (CTRL + F ) ]]></b:skin> and just above him, add next 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;}

Click "Save Template" and that's first part.

Now, in Post editor you got  "Compose" i "HTML" - see picture

When you upload photo, go to HTML and you will get this
 <div class="separator" - That is for normal photo without zoom effect. Don't worry, it wan't affect your blog or site.
Remember: You must upload a photo, no copy/paste or it wan't work.
And when you want to add zoom effect, simply add this code
<div class="zoomeffect"

If you want, you can add this in any part of your blog, for example in post, you have 10 pics and you want just one to be zoom, just do this <a class="zoomeffect" href="YOUR-IMAGE-URL/" target="_blank">
Change YOUR-IMAGE-URL with url of your image and that's all. I hope that work well.