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
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
*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
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>
<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
actually its working inside a post but not for READ MORE BUTTON
ReplyDelete@raman
ReplyDeleteSure it's working for read more button.
Just add a <a class='hovergallery' before expr:href='data:post.url'
This is a example:
ReplyDeleteBEFORE:
<a expr:href='data:post.url'
AFTER
<a class='hovergallery' expr:href='data:post.url'