How to Add Zoom Hover Effect to Images in Blogger

CSS is really very powerful and useful tool today , We can different types of the effects to images , buttons and text on your Blog. It very easy and simple to implement on Blogger blogs. In the previous post we discussed about adding rollover effect to your images on your Blogger blog. Now we are going to discuss about adding zoom over effect to Blogger images .

Zoom hover effect means , when you hover you mouse cursor on an image , the image size will increase.

How to Add Zoom Effect to Your Blogger Images on Mouse Hover :

With small CSS code we can add zoom effect to any image on your Blogger blog. Here I'm giving small CSS code , just add this code to your Blogger blog. You can add this code directly on your post editor to apply zoom effect to particular image. Oy you can add this code to your Blogger template to apply zoom effect to any image on your Blogger blog. Below I'm showing you how to add this code to your Blogger blog.

Follow below steps to add zoom effect to images on your Blogger blog :

Step 1 : Go to your Blogger Dashboard

Step 2 : Click on template and click on Edit HTML

Step 3 : Now search for ]]></b:skin>  in your template code
Step 4 :  Add below code just above the ]]></b:skin>

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

.zoom img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
} 
<a class="zoom" href="Image URL" target="_blank">
<img src="Image URL" /></a>

Replace Image URL with your image url

Step 5 : Click on save template.

This method is adding zoom effect to particular image ( i.e the image which you mention in the above code ) on your Blogger blog.

You can also apply this effect to any image on your Blogger blog post.

Follow below steps to add zoom effect to an image on your blog post :

Step 1 : Go to your Blogger Dashboard

Step 2 : Click on Post and click on Edit Post

Step 3 : Go to HTML mode by click on HTML button on your post editor.

Step 4 :  Generally you can see <div class="seperator" .. tag just above the image code after adding an image on your post editor.

Now just replace  seperator with zoom.

Step 5 : Click on Update button to update post.

Like this just add < div class="zoom" > tag above any image code to apply zoom effect to any image on your Blogger blog.

Like this you can add zoom hover effect to images in your Blogger blog. If this method is