Skip to main content

How To Add Zoom Effects To Blogger Images On Mouse Hover

Normally the zoom effect is visible on eCommerce site. Zoom effect helps user to observer a product from very near. When a user hovers mouse on an image, the image size becomes large. This post will teach you how to add zoom effect to any image on mouse hover in your blog. Read also : How to lock and unlock your android phone.

If you have a little bit knowledge of HTML then you won't face any kind of problem but if you are newbie in the field of blogging you may face difficulty in adding some codes in your template. Read also How to add Facebook comment box to blogger.

Important Note!

Your template is place where you can do lots of experiment with the different codes. Before changing or doing anything in the template, I always recommend everyone to anyone to take backup of your template. It helps you to recover your template from an unexpected error. Read also : How to make money from Bigrock.

http://demomanidin.blogspot.in/2015/08/zoom-effect-testing.html

Steps to Add Zoom Effect

Now lets start adding zoom effect to any image. At first you need to login to your blogger dashboard and then click Template and click Edit HTML. Now you will see all the coding of your template. Read also : How to Setup AdSense Page Level Ads and Fix Script Error.

Now click anywhere inside the code and press Ctrl + F on the keyboard to get search box. Type     ]]></b:skin>     and hit enter on the keyboard. Just above   ]]></b:skin>    paste the below CSS code and after that click Save Template. Read also : How to monetize YouTube video that matched third party content..

.zoomeffect img{
-webkit-transform:scale(0.7);
-moz-transform:scale(0.7);
-o-transform:scale(0.7);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.8;
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;
}

Activate Zoom Effect On Images

After saving the template, write a new post and upload an image. Once image upload is complete switch to HTML mode. Now find the div tag for your image which looks like below. Read also Best SEO tools to analyze a website

 <div class="separator" style="clear: both; text-align: center;">

Now you just need to replace the class attribute whatever it is to zoomeffect. Normally class attribute is separator. The new div tag looks like below. Read also : How to make Money from Google Apps.

<div class="zoomeffect" style="clear: both; text-align: center;">

That's it! Thanks for reading the post. Let me know whether you have experienced zoom effect in your blog.  If not, then try now. Let others to experience this feature by sharing this post on your social networks.


Comments