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…………………………………….
0 comments