Les nouveautés et Tutoriels de Votre Codeur | SEO | Création de site web | Création de logiciel





seo Mouse Hover Zoom Effect For Your Blogger Images - jQuery 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.

 

 

logo_zoom

 

 

  • 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…………………………………….

2013, By: Seo Master

Labels: ,



Leave A Comment:

Powered by Blogger.