Mouse Hover Zoom Effect For Your Blogger Images - jQuery

Friends, This post contain a trick to zoom your blogger images with out clarity loss. If you want to insert this effect to your blogger, Follow this post.

• Log in your Blogger account.

• Click on Templates.

• Hit on Edit Html button and proceed.

• Find (Ctrl+F)   ]]></b:skin> tag.

• Copy and paste below code before  ]]></b:skin> tag.

/*------- Master Hacks ZOOM-OUT ZOOM-IN -------*/
.mbtzoom {
padding:5px;
position:fixed;
bottom: 35px;
right:10px;
cursor: pointer;
text-decoration: none;
border: 0px solid transparent;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.mbtzoom:hover  {
  zoom: 2;
  text-enlarge: 2;
  -moz-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(2);
}

You wish to apply the zoom effect to any image you want simply use this code.

<a href="URL OF PAGE" class="mbtzoom"><img  width="60px" height="60px" src="IMAGE LINK" alt="back to top"  /></a>

• Change Red color with your Page link and Image link.

*Make sure to Keep width and height equal to half the size of original image. For example if the image size is 100px by 100px then set width="50px" and height="50px".
















……………………………..END…………………………………….

Posted in: Blogs and Websites, HTML