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

 

About This Author

I am Petia Koleva and I am doing web and graphic design. I also like to experiment in infographics and motion graphics design. I graduated @Gray's School of Art in Aberdeen, Scotland - BDes (Hon) Design for Digital Media. I have two design awards: BP Design Award 2012 @ Gray's School of Art and RGU Purchase Prize Award. I am very passionate about design and I share my passion on designify.me.

3 Comments

You can post comments in this post.


  • hi, how can i get more zoom??

    BizarroSkull 1 year ago Reply


    • 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.

      designifyme 1 year ago Reply


  • 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

    arcarr01 10 months ago Reply


Post A Reply