Zoom out/in hover Effect
There are many ways you can add special effects to your web pages and one of them is adding a Zoom Effect on Images when the user hovers over them.You create image zoom effect using css3 transitions. That means you can Grow an Image or Shrink and Image on mouse hover can be created using CSS3 scaling transformation.
To have a zoom effect, you need to use the CSS transform property with your preferred scale amount. It allows managing the enlargement of the picture. CSS animations benefit from hardware acceleration and as a result, seem flatter than other ways of animating.
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);}
ગુજરાતી ન્યુઝ 24/7
Saturday 19 December 2020