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 .polaroids a :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. ul .polaroids a { -webkit-transform : r o t a t e ( -2deg ); -moz-transform : r o t a t e ( -2deg ); } ul .polaroids li :nth-child ( even ) a { -webkit-transform : r o t a t e ( 2deg ); -moz-transform : r o t a t e ( 2deg ); } ul .polaroids li :nth-child ( 3n ) a { -webkit-transform : none ; -moz-transform : none ; position : relative ; top : -5px ; } ul .polaroids li :nth-child ( 5n ) a { -webkit-transform : r o t a t e ( 5deg ); -moz-transform : r o t a t e ( 5deg ); position : relative ; right : 5px ; } ul .polaroids li :nth-child ( 8n ) a { position : relative ; top : 8px ; right : 5px ; } ul .polaroids li :nth-child ( 11n ) a { position : relative ; top : 3px ; left : -5px ; } Read about :nth-child and it's usage here. 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. ul .polaroids a :hover { -webkit-transform : s c a l e ( 1.25 ); -moz-transform : s c a l e ( 1.25 ); position : relative ; z-index : 5 ; } Sweet, now we have our "randomly" rotating images, title text for captions, and some cool hovers to zoom in on the image.