How to Add Zoom Hover Effect to Images in Blogger

CSS is a powerful and useful tool that allows us to apply different types of effects to images, buttons, and text on our blog. It is easy and simple to implement on Blogger blogs. In the previous post, we discussed adding a rollover effect to images on your Blogger blog. Now, we will discuss adding a zoom hover effect to Blogger images.

A zoom hover effect refers to the image size increasing when you hover your mouse cursor over it.

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

With a small CSS code snippet, you can add a zoom effect to any image on your Blogger blog. Here is the CSS code that you can add directly to your post editor to apply the zoom effect to a specific image. Alternatively, you can add this code to your Blogger template to apply the zoom effect to any image on your blog. Below, I will explain 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 following 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 adds a zoom effect to a particular image (i.e., the image mentioned 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 the HTML button on your post editor.

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

Now just replace  seperator with zoom.

Step 5 : Click on Update button to update post.

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

By following this method, you can easily add the zoom hover effect to images in your Blogger blog. If you have any questions or need further assistance, feel free to ask.