Polaroid Images with CSS3

index.html

<div class="container">
  <div class="item">
    <figure class="polaroid">
      <img src="https://unsplash.it/400/300" alt="">
      <figcaption class="caption">by John Aguilar</figcaption>
    </figure>
  </div>

  <div class="item">
    <figure class="polaroid">
      <img src="https://unsplash.it/400/300?image=250" alt="">
      <figcaption class="caption">by Amanda Forsyth</figcaption>
    </figure>
  </div>

  <div class="item">
    <figure class="polaroid">
      <img src="https://unsplash.it/400/300?random" alt="">
      <figcaption class="caption">by David Leonard</figcaption>
    </figure>
  </div>

  <div class="item">
    <figure class="polaroid">
      <img src="https://unsplash.it/400/300?image=50" alt="">
      <figcaption class="caption">by Wendy Andrews</figcaption>
    </figure>
  </div>

  <div class="item">
    <figure class="polaroid">
      <img src="https://unsplash.it/400/300?image=70" alt="">
      <figcaption class="caption">by Marjorie Smith</figcaption>
    </figure>
  </div>
</div>

Polaroid Images with CSS3.markdown

Polaroid Images with CSS3

A Pen by Alexandra Caulea on CodePen.

License.

style.sass

@import 'bourbon'
body    
  background: #ECE9E6
  background: -webkit-linear-gradient(to left, #ECE9E6 , #FFFFFF)
  background: linear-gradient(to left, #ECE9E6 , #FFFFFF)
  font-size: 14px
  line-height: 1.6
  font-family: 'Great Vibes', cursive

img
  width: 100%
  height: auto   

.container
  width: 100%
  text-align: center

.polaroid
  background-color: #fff
  padding: 1em
  box-shadow: 0 0.25em 1em rgba(0,0,0,0.2)

.caption
  font-size: 2em
  text-align: center
  +transition(all 0.3s)

.item
  display: inline-block
  margin-top: 2em
  +filter(grayscale(90%))

.item .polaroid:before
  content: ''
  position: absolute
  z-index: -1
  +transition(all 0.3s)

.item:nth-of-type(4n+1)
  +transform(scale(0.8, 0.8) rotate(5deg))
  +transition(all 0.3s)

.item:nth-of-type(4n+1) .polaroid:before
  +transform(rotate(4deg))
  width: 45%
  height: 20%
  bottom: 30px
  right: 10px

.item:nth-of-type(4n+2)
  +transform(scale(0.8, 0.8) rotate(-5deg))
  +transition(all 0.3s)

.item:nth-of-type(4n+2) .polaroid:before
  +transform(rotate(-4deg))
  width: 45%
  height: 20%
  bottom: 30px
  right: 10px

.item:nth-of-type(4n+3)
  +transform(scale(0.8, 0.8) rotate(-3deg))
  +transition(all 0.3s)

.item:nth-of-type(4n+3) .polaroid:before
  +transform(rotate(-4deg))
  width: 45%
  height: 20%
  bottom: 30px
  right: 10px

.item:nth-of-type(4n+4)
  +transform(scale(0.8, 0.8) rotate(3deg))
  +transition(all 0.3s)

.item:nth-of-type(4n+1) .polaroid:before
  +transform(rotate(-4deg))
  width: 45%
  height: 20%
  bottom: 30px
  right: 10px

.item:nth-of-type(4n+5)
  +transform(scale(0.8, 0.8) rotate(0deg))
  +transition(all 0.3s)

.item:nth-of-type(4n+1) .polaroid:before
  +transform(rotate(0deg))
  width: 45%
  height: 20%
  bottom: 30px
  right: 10px

.item:hover
  +transform(scale(1, 1) rotate(0deg))
  +filter(none)
  +transition(all 0.3s)

.item:hover .polaroid:before
  content: ''
  position: absolute
  width: 90%
  height: 90%
  bottom: 0%
  right: 5%
  z-index: -1
  +transform(rotate(0deg))
  +transition(all 0.3s)