How to Add Zoom Hover Effect to Images in Blogger

css image hover zoom effects css image hover transition effects overlay effects



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 ]]> in your template code
Step 4 : Add below code just above the ]]>

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



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

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

Share Whatsapp