Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Polaroid Images with CSS3
<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>
@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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.