Polaroids with CSS3

In this playground adventure, we use some awesome CSS2 and CSS3 to turn an otherwise unassuming list of images into a full-blown set of polaroid pictures. Check out the demo and code snippets below. Read the blog post for more info »

Note: Demo works best in Safari 4.x and Chrome 5. In Firefox you won't see the enlarging transition.

How it Works

Through a combination of browser-specific CSS (2 and 3) integration and some basic styling, we've turned regular old images into cool looking polaroid style images—with no additional markup to show the text.

Using the Title Attribute

Instead of adding additional markup (more headings or paragraphs), we've opted to reuse the content within the title attribute of the surrounding anchor tag. Since it's good practice to use proper title text, and it's really freaking cool to do stuff with just CSS.

ul.polaroidsa:after {
content: attr(title);
}

Note: this is from the CSS2.1 spec, but browsers haven't implemented it fully. Read up on it here. It does, however, work in IE8, FF2+, Safari 3+, Opera, and Chrome)

We have to use the title attribute for the anchor because the alt attribute isn't fully implemented by Safari or Firefox. This would work in the same way with an img tag once that is integrated.

Adding "Random" Tilts

Safari 4 and Firefox 3.5 both have support for the :nth-child pseudo-selector (this is CSS3). With it, you can programatically select sibling elements that are even, odd, and much more. In this example, we use several options that help give the images a more random looking layout.

Although this seems like a bit much, this works to our advantage. First, we don't need any additional classes because we can select which ones we want via the :nth-child pseudo-selector. Second, by having so many changes, we get the random appearance in a decent sized gallery.

Making Them Scale

For the scaling, we once again turn to some CSS3. The transform properties we used above can be used to scale our images as well (this if the for hover effect) for a nice hover effect.

Sweet, now we have our "randomly" rotating images, title text for captions, and some cool hovers to zoom in on the image.

Final Details

Now, we go back and make things as sexy as can be with some more CSS3 goodness. In addition, since Safari supports transitions (they're in the works for Firefox), we can smooth the hover effect by adding just one extra rule.

Check out other Playground experiments

Get started with finishing

Team up with our designers to see how our iterative design process can get your project going. Equipped with our Progressive Design process, visual skills, and the coding chops that brought you Foundation, ZURB Studios is ready to jump in and get your product out to the masses!