CSS Image Zooming Grid

Time to get your CSS zoom on!

Have you ever found an awesome site that uses some sort of grid to display images? Better yet, when you hover over those images they do a fancy zoom in/out? If so, you’re in luck because that’s exactly what we’re going to build today!

The HTML

Our markup consists of a parent .image-zoom-container with .zoom-container child divs for each image container. Inside of each .zoom-container we’ll have a caption and an image wrapped inside an anchor tag this makes the entire area clickable).

<div class="image-zoom-container">
	<div class="zoom-container">
		<a href="#">
			<span class="zoom-caption">
				<h3>Costa Rica</h3>
			</span>
			<img src="images/costa-rica-001.jpg" />
		</a>
	</div>
	<!--/.zoom-container-->
	<div class="zoom-container">
		<a href="#">
			<span class="zoom-caption">
				<h3>Bavaria</h3>
			</span>
			<img src="images/bavaria-001.jpg" />
		</a>
	</div>
	<!--/.zoom-container-->
	<div class="zoom-container">
		<a href="#">
			<span class="zoom-caption">
				<h3>Firenza</h3>
			</span>
			<img src="images/firenza-001.jpg" />
		</a>
	</div>
	<!--/.zoom-container-->
	...
</div>
<!--/.image-zoom-container-->

The CSS

The CSS for the zoom containers use a responsive grid that I designed in another tutorial. Check it out here if you’re not familiar with it.

As for the image zooming, we’re going to use overflow:hidden and the CSS3 transition property to achieve the zooming effect. We’ll also use opacity to add a nice effect. You’ll also notice some media queries for mobile/tablet styling.

.image-zoom-container {
	list-style: none;
	font-size: 0px;
}
.zoom-container {
	position: relative;
	overflow: hidden;
	display: inline-block;
	width: 33.33%;
	font-size: 16px;
	font-size: 1rem;
	border: 1px solid #fff;
	vertical-align: top;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.zoom-container img {
	display: block;
	width: 100%;
	height: auto;
	-webkit-transition: all .5s ease; /* Safari and Chrome */
        -moz-transition: all .5s ease; /* Firefox */
        -ms-transition: all .5s ease; /* IE 9 */
        -o-transition: all .5s ease; /* Opera */
        transition: all .5s ease;
}
.zoom-container .zoom-caption {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
	background: rgba(0, 0, 0, .5);
	-webkit-transition: all .5s ease; /* Safari and Chrome */
        -moz-transition: all .5s ease; /* Firefox */
        -ms-transition: all .5s ease; /* IE 9 */
        -o-transition: all .5s ease; /* Opera */
        transition: all .5s ease;
}
.zoom-container .zoom-caption h3 {
	display: block;
	text-align: center;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 1.5em;
	font-weight: 900;
	letter-spacing: -1px;
	text-transform: uppercase;
	color: #fff;
	margin: 23% 0 0;
	padding: 10px 0;
	border-top: 5px solid rgba(255, 255, 255, .15);
	border-bottom: 5px solid rgba(255, 255, 255, .15);
}
.zoom-container:hover img {
	-webkit-transform:scale(1.25); /* Safari and Chrome */
        -moz-transform:scale(1.25); /* Firefox */
        -ms-transform:scale(1.25); /* IE 9 */
        -o-transform:scale(1.25); /* Opera */
         transform:scale(1.25);
}
.zoom-container:hover .zoom-caption {
	background: none;
}

@media (max-width: 767px) {
	.zoom-container {
		width: 50%;
	}
}

@media (max-width: 480px) {
	.zoom-container {
		width: 100%;
	}
}

Conclusion

That’s all there is too it! Pure CSS to achieve a nice zooming effect on hover. Let me know how you use it in the comments below.