Line25

How To Create a Pure CSS Polaroid Photo Gallery

Read the full post

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.

Pure CSS Polaroid Gallery Demo

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.

Prepare the photographs

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

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.

Basic HTML and CSS styling

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.

Styled up with CSS3 properties

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.

Overlapping CSS polaroid photos

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.

Pure CSS Polaroid Gallery Demo

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.

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

115 Comments

  1. Marco says:

    Wow – that looks a lot like my “polaroid photo viewer”. Only mine has the addition of “captions” and can also be dragged around with jQuery:
    http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html

    A couple of weeks ago, I also created a “non-full screen” version for those who wanted the polaroids trapped in a container:
    http://www.marcofolio.net/webdesign/the_polaroid_photo_viewer_non-full_screen.html

    Anyway, good to see that you’ve picked up this technique too and interested to see how you would handle it!

    • Darco says:

      So is your post because you like what is done or you just want people to know you created something with jQuery?

  2. Excellent tutorial. I never knew it was so easy to make a background like that, I thought it was going to include loads of images etc!

    It’s your little tutorials like this that are really helping me understand CSS – keep up the great work!

  3. Dzinepress says:

    really nice gallery for my web projects thumbnails. thanks

  4. zeemiDesign says:

    Great tutorial.
    It’s good to see what can actually be achieved with CSS 3 once in a while. I saw already hundreds of post with lists of CSS 3 properties and but never this!
    Keep up the great work, it’s always a pleasure to check your blogs out.

  5. Justin Slack says:

    Great tutorial Chris. Good to see more and more CSS3 properties in action. IE will probably catch up in around 2025 :)

  6. mark says:

    It is guys like you who inspire to really go and do my own corporate website. These ideas make me stand out from the median. Now only trying to find time to really do it. With my (lack of) skills it will probably take me another 4 months to do it by the time you will have another great concept that I want to take on.

  7. really good tutorial one thing which browsers is will work.

  8. Ad Taylor says:

    This is a really nice idea, there is elegance in its simplicity.
    Might be worth adding the webkit box shadow too [-webkit-box-shadow: rgb(51, 51, 51) 0px 2px 15px;].

    Thanks for taking the time Chris

  9. honza says:

    It doesn’t work in MSIE 7

  10. Martin says:

    Impressive yet so simple! I like the approach and will be looking into implementing this with my clients. Thank you!

  11. You can add the Matrix and Shadow filters for IE to rotate the image and add a shadow for them. Then it’ll be truly cross-browser, with the lack of supporting Opera (but hopefully that’ll change soon).

  12. Manu says:

    Awesome tutorial, Chris! I can’t believe, that it works also *ok* in IE6! Why do we still need jQuery or other big javascript frameworks when it do the same thing with some nice CSS? Thanks a lot!

  13. PJ Pergas says:

    Hi,
    Please add http://www.whiteshoop.com to your list.

    Thanks,
    PJ Pergas

  14. Nice! But as long as you’re using CSS3 for the shadows and rotation, why not use ‘nth-child’ selectors for the random scattering, instead of adding all those classes in the HTML?

  15. Tabris Chen says:

    Amazing tutorial. Love the rotation!

  16. mcd says:

    This is great, except the rotation doesn’t work in IE, and in Chrome I’m not showing any shadows behind the polaroids? Should they be there?

  17. Megan says:

    Wow. This is awesome! Good stuff for sure! Can’t wait for IE to catch up to the rest of the browsers so it looks equally as dynamic! Great job!

  18. This is a good article. Thanks for the tips on css. Keep em coming.

  19. Dennis Freeze says:

    One small quibble. Instead of assigning “unique class names” to the anchors, why not make them IDs? Accessing elements by ID is the fastest operation, and this is actually the intended use of IDs.

  20. Creative and amazing one!!

  21. andresruiz says:

    Nice, reallly nice, but only worked on Firefox, it didn’t work on IE8 nor Opera 10
    Thanks anyway

  22. great post, and awesome idea…way to really showcase the power of non IE browsers…as a web dev, i’m sick of my friends asking why i get mad when they use IE, they always ask “but isn’t it all just the same?”

  23. Rob Miracle says:

    Safari, Chrome and Firefox 3.5 will display this content properly (which also gets several of the Linux specific browsers as well). IE7 and below and Opera are not CSS3 and IE8 is only partially.

    As for the unique class names, I agree, they should be ID’s. The purpose of an ID is to give an element a unique name. Classes are there to cover multiple items on the page that need the same behavior.

    Still this is an excellent tutorial!

  24. Ryan says:

    Nice, why not use nth-child psuedo class rather than classes to target the anchors. e.g. ul.gallery li:nth-child(1) a

  25. This was a fabulous tutorial…I was able to pull it off and add the lightbox effect, which I’ve never done before, and they work together really nicely :)

  26. Andi D says:

    Great tutorial! Very nice and well prepared for the future of CSS.
    I’m confident that other browsers will implement all CSS3 features soon – exept our little friend IE :)

  27. Thanks for the comments everyone.

    Great thinking on the nth child selector, gutted I didn’t consider that!

  28. Remus says:

    Merci beaucoup :)

  29. Hi Chris. Could you proper credit me???
    Five of the six photos are mines …

  30. Really good job Chris.
    That will really help me to understand more CSS and learn further more about it.

  31. erivex says:

    great tut ^^

  32. Mars says:

    that was a quick one, great tutorial

  33. Nardyello says:

    Simple and excellent. Fantastic result.

    Hadn’t ever imagined such a nice design. Thank you for sharing! :D

  34. cosmo says:

    Thanks for the tutorial. I am definetely going to use it.

  35. Dosent work in firefox or explorer – demo.

  36. I loved the rotation effect. I didn’t know that was possible. Thanks for that tip.

    I also liked how you did the overlapping effect.

  37. bmk81 says:

    css3 FTW!

    Nice howto – css3 is going to make the web even more beautiful =)

  38. Gordejev says:

    Great CSS3 tutorial. Thanks Chris.

  39. pw says:

    rotation / shadow does not work for me in demo. I’m using firefox 3.0.14 on a Windows XP machine.

    In Firebug -> Styles, the -moz-transform and -moz-box-shadow-properties don’t even show up!

    Tried de-activating WebDeveloperToolbar AND FireBug – no success!

    These two are not real CSS3 properties anyways, are they?

    regards, pw

  40. m a r c o says:

    Very Nice… Is there anything that can be done to make it work on IE? Not that I like IE, but most people use it…

  41. Troy III says:

    CSS3 is ten years late and behind explorer 4.01 capabilities (published in december 1997).

    Everything that IE antagonists are exited about CSS3 is way to old and out of fashion.

    W3C reinventing the wheel as always but too godamn late, as always…

  42. Soh says:

    This is awesome! :-)

  43. tamer says:

    it`s not work in internet explorer 6
    i hope to find solution for it

  44. Fenson J says:

    This is great yet so simple though there’s plenty of workarounds that need to be done for IE.

  45. mocax says:

    those aren’t standard css.

    those marked with -moz- and -webkit- are browser-specific extensions to css.

    so it won’t work on opera either

    as of now, css3 is still in drafting stages.

  46. Simply delicious; as always IE doesn’t show it properly; if somebody got the same problem this is the time to change to firefox or chrome…

  47. Carlos Luna says:

    Thx… i was looking for something like that :) i will try it

  48. ronald says:

    Wowm this is so cool, bookmarked it for future use, thanks . .

Sorry, comments are now closed