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 *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close