Design Lunatic

CSS3 Image Gallery

Today, I’ll be showing how to make a CSS3 image gallery. That’s right, CSS3. I’ve said this before, and I’ll say it again: I love CSS3. So, the gallery has thumbnails that resize on hover, and a main image that changes depending on what thumbnail was clicked.

HTML

First off, you’ll need some HTML to base the styles on.

<div id="images">

	<section id="thumbnails">

	</section>
	
	<section id="mainimage">
	
		<div id="imageplaceholder"></div>
	
	</section>
	
</div>

There is a main div with an id of “images”. This div is like the container div; it holds all of the content on the page. Then, there is a “thumbnails” section. Surprisingly, it holds the thumbnails. After that, there’s a “mainimage” div. This div holds the main image, which changes depending on what thumbnail is clicked. Inside the “mainimage”, there’s an “imageplaceholder” div. This div will be the one with a “background-image” style applied to it.

<section id="thumbnails">

	<div class="image"> 
	<a href="#test1">
		<img src="images/test1.jpg"> 
	</a>
	</a>
	</div>
	
	<div class="image"> 
	<a href="#test2">
		<img src="images/test2.jpg"> 
	</a>
	</div>
	
	<div class="image"> 
	<a href="#test3">
		<img src="images/test3.jpg"> 
	</a>
	</div>
	
	<div class="image"> 
	<a href="#test4">
		<img src="images/test4.jpg"> 
	</a>
	</div>
	
	<div class="image"> 
	<a href="#test5">
		<img src="images/test5.jpg"> 
	</a>
	</div>
	
	<div class="image"> 
	<a href="#test6">
		<img src="images/test6.jpg"> 
	</a>
	</div>
	
	<div class="image"> 
	<a href="#test7">
		<img src="images/test7.jpg"> 
	</a>
	</div>
	
	<div class="image"> 
	<a href="#test8">
		<img src="images/test8.jpg"> 
	</a>
	</div>
	
	<div class="image"> 
	<a href="#test9">
		<img src="images/test9.jpg"> 
	</a>
	</div>
	
</section>

Yes, that’s a lot of thumbnails. But what kind of image gallery is complete without a lot of thumbnails? Now, notice the fact that there’s a link in every thumbnail, pointing to #test and then a number. This is what powers the whole gallery, since we’ll be using the “:target” pseudo-selector.

<section id="mainimage">
	
	<div id="test1">
	<div id="test2">
	<div id="test3">
	<div id="test4">
	<div id="test5">
	<div id="test6">
	<div id="test7">
	<div id="test8">
	<div id="test9">
	
	
	
		<div id="imageplaceholder"></div>
	
	
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	
</section>

Yes, that’s scary, I’ll admit – but I never said this was going to be semantic, right? Each div has an id of “test” and then a number. That corresponds with the “hrefs” in the thumbnail links.

Now that we’re done with the simple and completely non-cluttered HTML, let’s move on.

CSS3

As usual, copy-paste Eric Meyer’s CSS reset first. Once you’ve done that, keep reading.

body {
background: #f8f8f8;
font-size: 15px;
line-height: 25px;
color: #515151;
}

#images {
padding-top: 100px;
width: 880px;
height: 440px;
margin: 0 auto;
}

#thumbnails {
float: left;
width: 440px;
margin-top: 20px;
}


#mainimage {
float: right;
width: 430px;
height: 430px;
background: #ffffff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 3px 1px #989898;
-moz-box-shadow: 0px 0px 3px 1px #989898;
box-shadow: 0px 0px 3px 1px #989898;
padding: 5px;
}

#mainimage img {
width: 430px;
height: 430px;
}

That was just the basic layout styling. The whole thing has a width of 880, and both sections are 440px wide. There’s also some border-radius and box-shadow styling.

.image {
opacity: 0.8;
position: relative;
float: left;
background: #ffffff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 3px 1px #989898;
-moz-box-shadow: 0px 0px 3px 1px #989898;
box-shadow: 0px 0px 3px 1px #989898;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
padding: 5px;
width:90px;
height: 90px;
margin-left: 15px;
margin-right: 15px;
margin-top: 15px;
margin-bottom: 15px;
}

.image img {
width: 90px;
height: 90px;
}

.image:hover {
cursor: pointer;
opacity: 1;
z-index: 5;
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}

There’s a lot of styling going on for the thumbnails. However, aside from the transitions, the most important part is the hover state. Notice the CSS3 transform. Here, we’re using the scale option, which takes the element and resizes it with the element’s center as the point of reference.

#imageplaceholder {
background: url('images/test1.jpg');
background-size: 100%;
width: 430px;
height: 430px;
}

This has a background image styling, which will change depending on what thumbnail was clicked.

#test1:target #imageplaceholder{
background: url('images/test1.jpg');
}

#test2:target #imageplaceholder{
background: url('images/test2.jpg');
}

#test3:target #imageplaceholder{
background: url('images/test3.jpg');
}

#test4:target #imageplaceholder{
background: url('images/test4.jpg');
}

#test5:target #imageplaceholder{
background: url('images/test5.jpg');
}

#test6:target #imageplaceholder{
background: url('images/test6.jpg');
}

#test7:target #imageplaceholder{
background: url('images/test7.jpg');
}

#test8:target #imageplaceholder{
background: url('images/test8.jpg');
}

#test9:target #imageplaceholder{
background: url('images/test9.jpg');
}

When each thumbnail is clicked, a “#test” and then a number are added to the url. The CSS3 “:target” selector checks the url, and when the url contains the name of the element with the “:target” selector, the styles are applied. In this case, the background image is different depending on what the url is.

That’s it. I hope you enjoyed this post, and if you have any questions or comments, feel free to use the comment section below.