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.

  • http://www.marcofolio.net Marco

    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

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

  • http://circleboxblog.com/ Callum Chapman

    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!

  • http://www.dzinepress.com Dzinepress

    really nice gallery for my web projects thumbnails. thanks

  • http://www.zeemidesign.com zeemiDesign

    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.

  • http://www.justinslack.com Justin Slack

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

  • http://www.mr63.com mark

    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.

  • http://www.webmasterdubai.com webmasterdubai

    really good tutorial one thing which browsers is will work.

  • http://durmiendoafuera.com diego \ Durmiendo Afuera

    excelente tuto !

  • http://www.iamadtaylor.com Ad Taylor

    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

    • http://pixelgraphics.us Douglas Neiner

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

  • honza

    It doesn’t work in MSIE 7

    • http://www.dreamfragments.org Joram

      Really? Unbelievable!! :-D

      • http://www.leschinskidesign.com John Leschinski

        It is kind of useless unless there is a solution for IE users.

        • http://www.worldguide.eu andi
          • http://www.rarepearldesign.com Wayne Helpard

            That is awesome, thanks for that link…and completely correct.

        • sbremer

          IE is kind of useless unless it implements CSS3.

        • Piney

          When will people learn IE is obviously not the best browser.

  • http://docuview.co.uk Martin

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

  • http://dariuszsiedlecki.com Dariusz Siedlecki

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

  • http://friendscall.me/manu Manu

    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!

  • http://www.whiteshoop.com PJ Pergas

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

    Thanks,
    PJ Pergas

    • Wiz

      You’re site sucks. It looks horrible in Firefox… I can’t imagine what it looks like in IE. And… It has nothing to do with this tutorial. Stop spamming your worthless crap.

      • http://css-all.blogspot.com raghava

        s, its only working in only mozilla……

  • http://dougal.gunters.org/ Dougal Campbell

    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?

    • http://www.marcofolio.net Marco

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

  • http://tabrischen.com Tabris Chen

    Amazing tutorial. Love the rotation!

  • http://www.mcdowellcrook.com mcd

    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?

  • http://megansaxdesigns.com Megan

    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!

  • http://www.aarson.com Tampa Web Design

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

  • Dennis Freeze

    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.

  • http://www.gauravchaudhary.com Gaurav Chaudhary

    Creative and amazing one!!

  • http://andresruizsays.blogspot.com/ andresruiz

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

  • http://www.thinkbohemian.com Think Bohemian

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

  • http://www.robmiracle.com Rob Miracle

    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!

    • http://ssbuck.blogspot.com Scott

      Yeah, it doesn’t work in FireFox 3.0 either. It’s a nice novelty, but of really limited use if 99% of web users won’t be able to see it.

      • sbremer

        Works perfectly with Firefox 3.5, though.

  • http://www.thecssninja.com/ Ryan

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

  • http://www.katenickerson.com/blog Kate Nickerson

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

  • http://www.worldguide.eu Andi D

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

  • http://line25.com Chris Spooner

    Thanks for the comments everyone.

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

  • Remus

    Merci beaucoup :)

  • http://www.flickr.com/photos/claudio_ar/ Claudio Mufarrege

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

    • http://www.blog.spoongraphics.co.uk Chris Spooner

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

  • http://www.antoineguedes.com Antoine Guédès

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

  • erivex

    great tut ^^

  • http://www.orphicpixel.com Mars

    that was a quick one, great tutorial

  • http://creativefeed.nardyello.com Nardyello

    Simple and excellent. Fantastic result.

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

  • http://otmart.net cosmo

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

  • http://www.itemtrader.ca James beuthling

    Dosent work in firefox or explorer – demo.

    • http://www.metacomdesign.com/blog MetacomCreative

      It’s working for me in Firefox

      Great demo, cool to see new stuff with CSS3

  • http://nwds-ak.com Alaska Web Design

    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.

  • http://bmk81.wordpress.com bmk81

    css3 FTW!

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

  • http://www.gordejev.lv/ Gordejev

    Great CSS3 tutorial. Thanks Chris.

  • http://www.gixx-web.eu Gixx
  • http://www.kwk-webdesign.de pw

    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

  • http://www.mdostudio.com m a r c o

    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…

  • Troy III

    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…

  • http://www.SohTanaka.com Soh

    This is awesome! :-)

  • tamer

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

  • http://fensonism.blogspot.com Fenson J

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

  • mocax

    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.

  • http://www.mercenarydesign.blogspot.com Elcodigodebarras

    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…

  • http://www.webrecurso.com Carlos Luna

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

  • http://www.redsan.com Redsan

    Superbe!!!

  • http://www.mylocaltown.ie/ ronald

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