Polaroid

by PhilQ

HTML

<div class="polaroid">
    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=" alt="" />
    <span>Hier een omschrijving...<br/>
    ...van maximaal 2 regels.</span>
</div>
<div class="polaroid extra">
    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=" alt="" />
    <span>Hier een omschrijving...<br/>
    ...van maximaal 2 regels.</span>
</div>

CSS

*,:after,:before{
    margin:0;
    padding:0;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    -webkit-text-size-adjust:100%;
}

.polaroid {
    position: relative;
    display: inline-block;
    margin: 20px;
    padding: 20px;
    border: 1px solid rgba(0,0,0, 0.3);
    background-color: rgba(255,255,255, 1);
    /*
    box-shadow: 3px 3px 1px 0px rgba(0,0,0, 0.1);
    */
    transform: rtate(0deg) translate3d(0, 0, 0);
    
    -webkit-font-smoothing: none;
}
.polaroid:before {
    content: "";
    position: absolute;
    height: 15px;
    left: 8px;
    bottom: 3px;
    right: 8px;
    z-index: -1;
    opacity: 0.15;
    background-color: #000;
    box-shadow: 0px 0px 5px 5px #000;
    transform: rotate(-1.1deg) translate3d(0, 0, 0);
    -webkit-font-smoothing: none;
}
.polaroid:after {
    content: "";
    position: absolute;
    height: 15px;
    left: 8px;
    bottom: 3px;
    right: 8px;
    z-index: -1;
    opacity: 0.15;
    background-color: #000;
    box-shadow: 0px 0px 5px 5px #000;
    transform: rotate(1.1deg);
    -webkit-font-smoothing: none;
}
.polaroid img {
    float: left;
    width: 350px;
    height: 320px;
    border: 0px solid rgba(0,0,0, 0.3);
    background-color: rgba(0,0,0, 0.0);
    background-image: url(http://bloemennederland.nl/wp-content/uploads/2009/10/Waterlelie.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.extra img {
    -webkit-filter: grayscale(30%) contrast(130%) brightness(110%);
}
.polaroid span {
    clear: left;
    float: left;
    width: 100%;
    height: 40px;
    margin-top: 20px;
    background-color: rgba(0,0,0, 0.0);
}