Place Your Ads Here 460x68 ads

How to add Image Zoom Hover Effect to blogger

How to add Image Zoom Hover Effect to blogger







1. Log in to your blogger account and Go to Design >> Edit HTML

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F 


4. Paste below code before ]]></b:skin> tag

/*URL: http:www.bloggercodes.com */
.hovergallery img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
}
.hovergallery img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}

Now you can add this zoom hover for your image. ill give a example to do this

5. Click on "Posting" >> "New Post" and  go to edit HTML


<a class="hovergallery" href="http://www.bloggercodes.com" target="_blank">
<img src=" http://1.bp.blogspot.com/_XoMK3ToWnac/TOnzgjW6lgI
/AAAAAAAAAOg/ZjqasXcFpxo/s1600/blogger.jpg" /></a>


     


*Replace  http://www.bloggercodes.com  with your link
*Replace  http://1.bp.blogspot.com/_XoMK3ToWnac/TOnzgjW6lgI
/AAAAAAAAAOg/ZjqasXcFpxo/s1600/blogger.jpg with image URL

6. Now you can click publish post and enjoy with Zoom image hover



Sameera ChathurangaAbout Author Shoyab Khan

Blogger, MAC user, Apple Fan, Online Content Writer, Designer, Gamer, Programmer and Jovial Guy!. Like my Facebook Fan Page. Catch me on Twitter and Google+. Read more about Me and Www. Only4Everyone.Blogspot.com. Download Free Games,Download Free Software,Download Movies and Watch Online,Blogger Wordpress and Website Tips , Tricks ,Widgets,Templets, and many other Sources and Health Tips,Photo Gallery contact me

Thank You

0 comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...