.container
  .polaroid
    .polaroid-img 
      .gloss
      %img(src="http://farm7.static.flickr.com/6052/6411572503_fd28c63f1a.jpg")
    %p
      Fields of gold

  .polaroid
    .polaroid-img 
      .gloss
      %img(src="http://images.8tracks.com/cover/i/000/936/930/52080.original-8457.jpg?rect=0,11,582,582&q=98&fm=jpg&fit=max")
    %p
      Summer of '69

  .polaroid
    .polaroid-img 
      .gloss
      %img(src="https://65.media.tumblr.com/1df9b47361472d169b80673f01b1362d/tumblr_nt2qfhYsW81un5fc4o1_1280.jpg")
    %p
      Magnificent beard 
View Compiled
*, *:before, *:after {
  box-sizing: border-box;
}

@import 'https://fonts.googleapis.com/css?family=Rock+Salt';

html {
  font-size: 18px;
}

body {
  font-family: "Rock Salt", sans-serif;
  font-size: 1em;
  line-height: 1.6;
  background: url('https://images8.alphacoders.com/370/370799.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
}

.container {
  min-width: 100%;
  min-height: 550px;
}

.polaroid {
  width: 300px;
  height: 360px;
  background: #FFF;
  position: absolute; 
  left: 40%;
  top: 15%;
  background: linear-gradient(120deg, #fff, #DDD 60%);
  box-shadow: 2px -2px 20px 0px rgba(0,0,0,0.6), inset 4px 5px 10px 0 rgba(0,0,0,0.1);
  -webkit-backface-visibility: hidden;
  &:nth-child(1) {
   left: 25%;
    transform: rotate(10deg);
  }
  
    &:nth-child(2) {
   left: 40%;
   top: 20%;
   transform: rotate(-15deg);
  }
  
    &:nth-child(3) {
   left: 55%;
   top: 10%;
   transform: rotate(5deg);
  }
}

.polaroid-img {
  position: absolute;
  top: 20px;
  left: 10px;
  width: 280px;
  height: 280px;
  background: #eee;
  overflow: hidden;
  img {
    width: 100%;
    z-index: -1;
  }
}

.gloss {
  position: absolute; 
  top: 0;
  left: 0;
  background: linear-gradient(120deg, rgba(255,255,255,.6), transparent 60%, rgba(0,0,0,.5) 99%);  
  box-shadow: inset 0 0 10px 1px rgba(0,0,0,0.2);
  width: 100%;
  height: 100%;
  z-index: 10; 
}

p {
  position: absolute;
  bottom: 5px;
  padding: 15px 20px;
  letter-spacing: .1em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.