Sunday, April 17, 2011

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




Dont Miss Another Post Connect With Us

Get informed when we publish the new post.So, you have to subscribe below

3 comments:

  1. ramanApril 30, 2011 at 4:38 PM

    actually its working inside a post but not for READ MORE BUTTON

    ReplyDelete
  2. 10titikMay 30, 2011 at 10:50 AM

    @raman
    Sure it's working for read more button.
    Just add a <a class='hovergallery' before expr:href='data:post.url'

    ReplyDelete
  3. 10titikMay 30, 2011 at 10:52 AM

    This is a example:

    BEFORE:
    <a expr:href='data:post.url'

    AFTER
    <a class='hovergallery' expr:href='data:post.url'

    ReplyDelete