How To Create a Pure CSS Polaroid Photo Gallery

Magical things can be done by combining various CSS properties, especially when some of the new CSS3 tricks are thrown into the mix. Let’s take a look at building a cool looking stack of Polaroid photos with pure CSS styling.

View the Demo

Check out the demo to see what we’ll be building. Remember, because we’ll be using a couple of CSS3 properties, users with IE won’t see the complete effect, but fully supporting browsers such as Firefox and Safari will be treated to the whole experience. We’ll use basic CSS to style up the photos into a Polaroid style images, then inject some additional styling with shadows and rotation, then use the z-index property to alter the stacking order of all the objects.

Start work by sourcing your images. For the sake of the tutorial, a bunch of beautiful shots were sourced from Flickr Creative Commons search:

• Iguassu Falls 006 by claudio_ar
• Sweet Home Under White Clouds by galego
• Sunset over the highway by claudio_ar
• Skies and fields from Argentina’s pampa 7 by claudio_ar
• Sunrise by claudio_ar
• Södermanland Lake by claudio_ar

body {
	background: #959796 url(images/wood-repeat.jpg);
}

#container {
	width: 600px; margin: 40px auto;
}

Next, set up the basic page structure with a container centered on the page. Grab a repeating wood texture to add interest to the page background.

<ul class="gallery">
	<li>< a href="#"><img src="images/1.jpg" alt="Photograph of a waterfall" /></li>
	<li>< a href="#"><img src="images/2.jpg" alt="Photograph of clouds and sunlight" /></li>
	<li>< a href="#"><img src="images/3.jpg" alt="Photograph of a lake scene at dusk" /></li>
	<li>< a href="#"><img src="images/4.jpg" alt="Photograph of a tree and green grass" /></li>
	<li>< a href="#"><img src="images/5.jpg" alt="Photograph of a beach sunset" /></li>
	<li>< a href="#"><img src="images/6.jpg" alt="Photograph of a flower and lake" /></li>
</ul>

Semantically lay out the collection of images in an Unordered List element, and wrap each image with an anchor to create a clickable link. Don’t forget to add a suitable description to each image.

Now we get start work on the CSS to style up the gallery. Firstly, we’ll want to remove the default bullet point graphics that appear on the list elements. Simply use list-style: none to clear these out.

ul.gallery li a {
	float: left;
	padding: 10px 10px 25px 10px;
	background: #eee;
	border: 1px solid #fff;
}

Give the images the Polaroid effect by adding a few styles to the anchors. Firstly float them to the left to stack them up side by side, then add some padding. Setting a background of a light grey will then give the traditional Polaroid shape. Finish this off with a very subtle highlight in the form of a 1px white border.

ul.gallery li a {
	float: left;
	padding: 10px 10px 25px 10px;
	background: #eee;
	border: 1px solid #fff;
	-moz-box-shadow: 0px 2px 15px #333;
	position: relative;
}

To really add realism to the design, use the CSS3 box-shadow property to add some shading to the photos. To ensure the stacking order works later, we’ll also need to add position: relative to the CSS.

<ul class="gallery">
	<li>< a href="http://www.flickr.com/photos/claudio_ar/2214532638/" class="pic-1"><img src="images/1.jpg" alt="Photograph of a waterfall" /></li>
	<li>< a href="http://www.flickr.com/photos/galego/3131005845/" class="pic-2"><img src="images/2.jpg" alt="Photograph of clouds and sunlight" /></li>
	<li>< a href="http://www.flickr.com/photos/claudio_ar/1810490865/" class="pic-3"><img src="images/3.jpg" alt="Photograph of a lake scene at dusk" /></li>
	<li>< a href="http://www.flickr.com/photos/claudio_ar/2952099761/" class="pic-4"><img src="images/4.jpg" alt="Photograph of a tree and green grass" /></li>
	<li>< a href="http://www.flickr.com/photos/claudio_ar/2811295698/" class="pic-5"><img src="images/5.jpg" alt="Photograph of a beach sunset" /></li>
	<li>< a href="http://www.flickr.com/photos/claudio_ar/2601700491/" class="pic-6"><img src="images/6.jpg" alt="Photograph of a flower and lake" /></li>
</ul>

Now we need to target each image individually, so go back and give each anchor a unique class name.

ul.gallery li a.pic-1 {
	z-index: 1;
	-webkit-transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
}
ul.gallery li a.pic-2 {
	z-index: 5;
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
}
ul.gallery li a.pic-3 {
	z-index: 3;
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
}

With unique class names in place, we can then add unique styling to each photo. Write out some lines of CSS specifying a different z-index order and a touch of CSS3 rotation to add variety to the images.

The stack of Polaroid photos should now be overlapping each other and have the appearance of being randomly placed on the wooden surface.

ul.gallery li a:hover {
	z-index: 10;
	-moz-box-shadow: 3px 5px 15px #333;
}

Style up the :hover state of the anchors to adjust the z-index to a higher figure, this will ensure each image will jump to the top of the stack when it has mouse focus. Also adjust the box-shadow to give the impression that the photo has lifted off the screen.

View the Demo

That’s all there is to it! Check the complete CSS and HTML in the example demo. You could take things further and combine the images with a great looking javascript lightbox effect for use on your own website.

Author: Chris Spooner