CSS Polaroid Style Image

A simple CSS class to turn an image into a polaroid. Uses :after pseudo class & attr(title) to display caption

by parkji

HTML

<a class="polaroid" href="#" title="Test polaroid">
    <img src="http://farm6.static.flickr.com/5149/5782502918_5515d2059f.jpg" alt="Test Polaroid" />
</a>

CSS

body {
    background-color: #dddddd;
    padding: 50px;
}
.polaroid {
    background: #FFFFFF;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    display: inline-block;
    padding: 20px 20px 70px 20px;
    position: relative;
    text-decoration: none;
}
.polaroid:after {
    bottom: 30px;
    color: #000000;
    content: attr(title);
    left: 0;
    position: absolute;
    text-align: center;
    width: 100%;
}