How to Zoom in effects in hover? Copy the HTML / CSS structure and paste it into your editor.
Example:
HTML
<a class="zoom-in-hover" href="#"> <span class="group"> <img src="https://www.anthonycarbon.com/wp-content/plugins/wordpress-popular-posts/no_thumb.jpg" alt="Zoom in effects in hover" /> </span> </a>
CSS
.zoom-in-hover { overflow: hidden; display: inline-block; text-align: center; } .zoom-in-hover .group { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.8s ease-in-out; display: block; overflow: hidden; } .zoom-in-hover:hover .group { -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); }
Leave a Reply