CSS Image Zoom Hover

by designify · July 15, 2013

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;
}