CSS Image Zoom Hover
This a great CSS image zoom hover effect that can be easily implemented in your website projects. When you hover the image you get a nice and neet CSS hover effect and also some info about the image.
HOW TO USE:
HTML
<div class="hover-details"> <img src="images/photo.jpg"/> <a href="#"> <div class="details"> <h4>Awesome nature</h4> <h6>Click to view picture</h6> </div> </a> </div>
CSS
/* * @freebie:hover-details * @author: Francisco Neves */ a, a:visited, a:hover, a:active { text-decoration: none; color: inherit; } div.hover-details { width: 250px; height: 169px; overflow: hidden; position: relative; transition: all 1s; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; } div.hover-details:hover { -webkit-box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.3); } div.hover-details > img { width: 100%; height: auto; transition: all 1s; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; } div.hover-details:hover > img { transform: scale(1.2); -ms-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -moz-transform: scale(1.2); } div.hover-details .details { opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/more.png) no-repeat center rgba(24, 24, 24, 0.3); transition: all .5s; -moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; cursor: pointer; } div.hover-details:hover .details { opacity: 1; } h4 { display: table; margin: 30px auto 0 auto; color: #FFF; padding: 0; } h6 { display: table; margin: 80px auto 0 auto; color: #FFF; padding: 0; }
DOWNLOAD HTML & CSS
via PixelsDaily
hi, how can i get more zoom??
BizarroSkull
Hi BizzaroSkull
In order to get more zoom, you have to edit the scaling in the CSS:
div.hover-details:hover > img
{
transform: scale(1.2);
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
-moz-transform: scale(1.2);
}
If you change the “scale(1.2);” to “scale(2.2)” you will see how the image is more zoomed.
Thanks.
Hi,
did you know that this CSS code doesn’t work for IE9? Do you know what it’s failing?
Great work by the way,
Kind Regards