How To Add Blogger Post Zoom Out/In Hover Effect On Images: There are many ways to add special effects to your web pages and one of them is to add a zoom effect on images when the user hovers over them. You can create an image zoom effect using css3 transitions. That means you can make an image grow or shrink and the hover image can be created using the CSS3 scale transform.
To have a zoom effect, you need to use the CSS transform property with your preferred scaling amount. Allows you to manage the magnification of the image. CSS animations benefit from hardware acceleration and, as a result, appear flatter than other forms of animation.
1. Zoom-in Effect :
❤ HTML <div class="post-thumb">
<img src="images/99585hgjkg-image-2.jpg" alt="picturexsf">
</div>
❤ CSS .post-thumb img{ -webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);transition: all .5s ease 0s;}
.post-thumb:hover img
{-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
transform: scale(1.5);}
2. Zoom-out Effect:
❤ CSS .post-thumb img{transition: all .5s ease 0s; }
.post-thumb:hover img
{-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
transform: scale(1.5);}
