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

NOTE: This zooming effect won’t work in older browsers like IE8. However, it won’t break your page either… you’ll just get a regular ole’ image grid.

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.

Discussion

7 thoughts on “CSS Image Zooming Grid”
  1. Hello, this is wonderful! Thank you…

    QUESTION: Is there a way to get the same effect using inline CSS? The reason being, one of the sites I’m working on only has access to the WIZIWIG so anything fancy I do has to be done in the on page HTML editor.

    Thank you so much in advance 🙂

Leave a Comment

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


Ali Jafarian

Tutorial Category UI Design
Comments 7 comments

Did you find value here?

If yes, please jump on my email list for more free stuff. I'll keep bringing the heat.

Get on the List