seo Mouse Hover Zoom Effect For Your Blogger Images - jQuery 2013
on Friday, November 29, 2013
|
Seo Master present to you: 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. - 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……………………………………. 2013, By: Seo Master
|
Labels: Blogs and Websites, html