How To Create a Pure CSS Polaroid Photo Gallery

How To Create a Pure CSS Polaroid Photo Gallery
Home » Tutorials » How To Create a Pure CSS Polaroid Photo Gallery

Line25 is reader supported. At no cost to you a commission from sponsors may be earned when a purchase is made via links on the site. Learn more

Magical things can be done by combining various CSS properties, especially when some of the new CSS3 tricks are thrown into the mix. Want to build a stack of Polaroid photos with pure CSS styling? In this tutorial, you will learn how to create a CSS Polaroid photo gallery.

Pure CSS Polaroid Gallery DemoPinPin

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 Polaroid Photo GalleryPin

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>

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 Polaroid Photo GalleryPin

Now we get to 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. 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 gray 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 Polaroid Photo GalleryPin 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="" class="pic-1"><img src="images/1.jpg" alt="Photograph of a waterfall" /></li>
	<li><a href="" class="pic-2"><img src="images/2.jpg" alt="Photograph of clouds and sunlight" /></li>
	<li><a href="" class="pic-3"><img src="images/3.jpg" alt="Photograph of a lake scene at dusk" /></li>
	<li><a href="" class="pic-4"><img src="images/4.jpg" alt="Photograph of a tree and green grass" /></li>
	<li><a href="" class="pic-5"><img src="images/5.jpg" alt="Photograph of a beach sunset" /></li>
	<li><a href="" class="pic-6"><img src="images/6.jpg" alt="Photograph of a flower and lake" /></li>

Now we need to target each image individually, so go back and give each anchor a unique class name. li a.pic-1 {
	z-index: 1;
	-webkit-transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
} li a.pic-2 {
	z-index: 5;
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
} 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 Polaroid Photo GalleryPin

The stack of Polaroid photos should now be overlapping each other and have the appearance of being randomly placed on the wooden surface. 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 DemoPinPin

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.

Written by Iggy

Iggy is a designer who loves experimenting with new web design techniques, collating creative website designs, and writing about the latest design trends, inspiration, design freebies, and more. You can follow him on Twitter


Would you like to say something?

  1. Jay says:

    Hi there!
    Nice job really! Im working on something simmilar but I want to give a title to the pictures on the bottom white bar. I tried to use the CSS content:after and to display the pics title but its not really working. Can anyone help?

    ul.f_galeria a:after {

  2. M A Gaffar says:

    Very nice gallery. worth trying out.

  3. Morgan says:

    I am reteaching myself web design because I want to finally make money doing something I love. This was a fun little project to do with the photos I have taken. My only question, since I am still kind of rusty, is what would I use to make the images become thumbnails of larger images instead of redirecting to another page since these are my own photos?

  4. ronald says:

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

  5. Redsan says:


  6. Carlos Luna says:

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

  7. Elcodigodebarras says:

    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…

  8. 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.

  9. Fenson J says:

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

  10. tamer says:

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

  11. Soh says:

    This is awesome! :-)

  12. 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…

  13. 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…

  14. 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

  15. Gordejev says:

    Great CSS3 tutorial. Thanks Chris.

  16. bmk81 says:

    css3 FTW!

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

  17. Alaska Web Design says:

    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.

  18. James beuthling says:

    Dosent work in firefox or explorer – demo.

  19. cosmo says:

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

  20. Nardyello says:

    Simple and excellent. Fantastic result.

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

  21. Mars says:

    that was a quick one, great tutorial

  22. Antoine Guédès says:

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

  23. erivex says:

    great tut ^^

  24. Claudio Mufarrege says:

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

    • Chris Spooner says:

      I assumed the link to the photos on Flickr would credit them enough, but I’ve also added your username to the link.

  25. Remus says:

    Merci beaucoup :)

  26. Chris Spooner says:

    Thanks for the comments everyone.

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

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

  28. Kate Nickerson says:

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

  29. Ryan says:

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

  30. 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!

  31. Think Bohemian says:

    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?”

  32. andresruiz says:

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

  33. Gaurav Chaudhary says:

    Creative and amazing one!!

  34. PJ Pergas says:

    Please add to your list.

    PJ Pergas

  35. 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.

  36. Tampa Web Design says:

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

  37. 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!

  38. Martin says:

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

  39. 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?

  40. Tabris Chen says:

    Amazing tutorial. Love the rotation!

  41. 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.

  42. Dougal Campbell says:

    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?

    • Marco says:

      That’s what my example does (but instead with CSS, it’s injected by JavaScript – see the first comment ) .

  43. Callum Chapman says:

    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!

  44. 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!

  45. Dariusz Siedlecki says:

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

  46. honza says:

    It doesn’t work in MSIE 7

  47. 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

    • Douglas Neiner says:

      I second this. Everything else you do has both -moz and -webkit, the shadow should be setup as well.

  48. diego \ Durmiendo Afuera says:

    excelente tuto !

  49. webmasterdubai says:

    really good tutorial one thing which browsers is will work.

  50. Justin Slack says:

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

  51. 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.

  52. Dzinepress says:

    really nice gallery for my web projects thumbnails. thanks

  53. 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:

    A couple of weeks ago, I also created a “non-full screen” version for those who wanted the polaroids trapped in a container:

    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?

Please Share