Ali Jafarian

The Web Project

I'm building a new online platform for learning web design and development. Check out the KickStarter to get early access and heavily discounted rates!

View the KickStarter


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.


  • Jeeten Bargaiya

    Always exact and perfect code :)

  • Lee Ann Clark

    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 :)

  • Maria Lopez

    I love your codes. Thank you so much! Works perfectly!

  • symons

    i just get it what i really want thank you so much

  • Gregory De Clercq

    what do you change for 4 pictures next to each other?

    • Αστροναύτης

      width: 33.3%;

      to

      width: 25%;

  • Aidan

    How do you make the text stay hidden until you move the mouse over?