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.

CSS Image Zoom Hover

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

 

Divi WordPress Theme

You may also like...

3 Responses

  1. BizarroSkull says:

    hi, how can i get more zoom??

    • designifyme says:

      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.

  2. arcarr01 says:

    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

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>