Mouse Hover Zoom Effect For Your Blogger Images - jQuery

Views:

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.

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".