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.bloggertrix.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.bloggertrix.com" target="_blank">
<img src=" http://1.bp.blogspot.com/_XoMK3ToWnac/TOnzgjW6lgI
/AAAAAAAAAOg/ZjqasXcFpxo/s1600/blogger.jpg" /></a>
     




*Replace  http://www.bloggertrix.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, Good luck

Related Posts

***