AddING Zooming effect to your Blog’s Image on Mouse Hover?

Customizing the image effects  in blogger is very easy and we can do this by using CSS in our template.To do the same, follow the below given procedure:

• Log in to your Blogger Account .
• Now click on “Template“. The screenshot of the same is shown below:

Template in Blogger Dashboard

• After that Click on “Edit Html” button. The screenshot of the same is shown below:

Edit html in template- blogger

• Don’t forget to check the “Expand Widget Template” check box in your blog template.The screenshot of the same is shown below:

Expand widget template in blogger

• Now search for ]]></b:skin> in your template.To do this, you can press crtl+F and type ]]></b:skin>  in the search box.
• Once you find the above code in your blogger template, copy and paste the below given code just above ]]></b:skin>

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

• Finally click on “Save Template” button.
• Now add a new Post and make few changes in html section to add these effects to your Blog posts images.Add an image in your blog and then click on “Html” button.The screenshot of the same is shown below:

Html in blogger

• Press “Ctrl +F” and type <div class=”separator” in the search box.Now replace separator withzoomeffect. New code will look like <div class=”zoomeffect“ .
• If you want to add this rotating effect to any other images then use the following code.

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

and see the magic thats  DONE...