Add Zoom Effect to Images on Mouse Hover in Blogger

Recently, we've shared Add Round Hover Effect to Images of your Blogger Blog Posts , Add Hover Effect to Images of your Blogger Blog Posts and today we are going to share another effect for your blog images. This hover effect zooms the image on mouse hover. To see how this image hover effect works, move you mouse cursor on the image below.

How to Add Zoom Effect to Images

Step 1. Log in to your Blogger Dashboard
Step 2. Go to Template >> Click on Edit HTML and search (Ctrl + F) for the Following Tag

]]></b:skin>

Step 3. Copy the Below code and Paste it just above/before the ]]></b:skin> tag

.zoomeffect img{
-webkit-transform:scale(0.9);
-moz-transform:scale(0.9);
-o-transform:scale(0.9);
-webkit-transition-duration: 1.0s;
-moz-transition-duration: 1.0s;
-o-transition-duration: 1.0s;
opacity: 0.8;
margin: 0 10px 5px 0;
}

.zoomeffect img:hover{
-webkit-transform:scale(1.0);
-moz-transform:scale(1.0);
-o-transform:scale(1.0);
opacity: 1;
} 

Step 4. Click on Save Template button

How to Use this Effect on Images

To use this effect in you posts then in the post editor after uploading your image switch to HTML look for the image class. The default image class is <div class="seperator". Now replace seperator to zoomeffect in the post editor and you're done.
If you want to use effect in other part of your blog then use the following tag and replace IMAGE-URL with the image URL.

 <a class="zoomeffect" href="IMAGE-URL" target="_blank"><img src="IMAGE-URL" /></a>

From Editors Desk

I hope that you will like this image hover effect, Give us your Feedback and Enjoy Blogging !Feel Free to Ask. Your Feedback is always highly appreciated  - See more at: http://blogolect.blogspot.com/b/post-preview?token=_xfJSUMBAAA._QudqCLLg7WGzaDyI8xMBQ.Kx0AKv8MK84qcLnfGHzLMQ&postId=3783301090408238732&type=POST#sthash.PIEvAy4V.dpuf

I hope that you will like this image hover effect zoom effect, Give us your Feedback and Enjoy Blogging !
Feel Free to Ask. Your Feedback is always highly appreciated.

Share This:

Tags:

Blog Design Blogging Tips

• Prevoius
• Next