Polaroid photo CSS

HTML

<div class="section grey">
     <h2 class="headline textCenter">Headline</h2>

    <ul class="pictureList">
        <li class="pictureItem">
            <div class="polaroid">
                <img src="http://lorempixel.com/200/200" />
                 <h3 class="polaroidName">Image Name</h3>

            </div>
            <ul class="buttonList textCenter">
                <!-- or just a div -->
                <li><a href="" class="button">Buy</a>

                </li>
                <li><a href="" class="button">Buy</a>

                </li>
            </ul>
        </li>
        <li class="pictureItem">
            <div class="polaroid">
                <img src="http://www.22h22.org/wp-content/uploads/2011/07/David_Hasselhoff.jpeg" />
                 <h3 class="polaroidName">Image Name</h3>

            </div>
            <ul class="buttonList textCenter">
                <!-- or just a div -->
                <li><a href="" class="button">Buy</a>

                </li>
            </ul>
        </li>
        <li class="pictureItem">
            <div class="polaroid">
                <img src="http://www.22h22.org/wp-content/uploads/2011/07/David_Hasselhoff.jpeg" />
                 <h3 class="polaroidName">Image Name</h3>

            </div>
            <ul class="buttonList textCenter">
                <!-- or just a div -->
                <li><a href="" class="button">Buy</a>

                </li>
            </ul>
        </li>
    </ul>
    <div class="clear"></div>
</div>

CSS

body {
    padding:10px;
}
/* Section Styles */
.section {
    padding:10px 10px 20px;
    margin:0 auto;
    max-width:960px;
}
.section.grey {
    background-color:#efefef;
}
/* Headings*/
.headline {
    font-size:36px;
    text-transform:uppercase;
    padding-bottom:10px;
}
/* Picture List */
.pictureList {
}
.pictureItem {
    float:left;
    width:33%;
}
.polaroid {
    border:1px solid #cccccc;
    margin:0 10px 10px;
    padding:10px;
    background: #cccccc;
    /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #cccccc 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #cccccc));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%, #cccccc 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%, #cccccc 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%, #cccccc 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #ffffff 0%, #cccccc 100%);
    /* W3C */
}
.polaroid img {
    display:block;
    max-width:100%;
    height:auto;
    width:auto;
}
.polaroidName {
    text-align:center;
    font-weight:bold;
    text-transform:uppercase;
}
/* Button List */
.buttonList {
}
.buttonList li {
    display:inline;
    padding-right:10px;
}
.buttonList.textCenter li {
    padding:0 5px;
}
/* Buttons */
.button {
    width:35px;
    height:25px;
    display:inline-block;
    overflow:hidden;
    background-color:red;
    /* so we can use an image instead */
    /* text-indent:125%; */
    /* This will hide the text, uncomment to hide */
}
/* Utilities */
.clear {
    clear:both;
}
.textCenter {
    text-align:center;
}