Polaroid images [HTML/CSS]

index.html

<ul>
  <li><img src="https://unsplash.it/300/300" width="200">
    <p>image #1</p></li>
  <li><img src="https://unsplash.it/400/400" width="200"/>
    <p>image #2</p></li>
  <li><img src="https://unsplash.it/500/500" width="200"/>
    <p>image #3</p></li>
  <li><img src="https://unsplash.it/200/200" width="200"/>
    <p>image #4</p></li>
</ul>
<div class="light"></div>

polaroid-images-html-css.markdown

Polaroid images [HTML/CSS]

A Pen by Jack Cranston on CodePen.

License.

DEMO https://codemyui.com/?p=29870

style.css

body{
  font-family: 'Homemade Apple', cursive;
  font-size:20px;
  background:url('https://images.pexels.com/photos/172277/pexels-photo-172277.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
  background-size:cover;
  background-repeat:repeat;
  color:#000;
}

ul{
  position:absolute;
  margin:0;
  padding:0;
}

li{
  text-align:center;
  display:inline-block;
  list-style:none;
  position:relative;
  border:solid 12px #fff;
  background:#fff;
  box-shadow:0 0 15px 0px #555;
  transition:all 1s ease;
  -o-transition:all 1s ease;
  -moz-transition:all 1s ease;
  -webkit-transition:all 1s ease;
  top:50px;
}


li:hover{
  top:0px;
  opacity:0.5;
}

li:nth-child(1){
    transform:rotate(10deg);
}

li:nth-child(2){
    transform:rotate(0deg);
}

li:nth-child(3){
    transform:rotate(-10deg);
}

li:nth-child(4){
    transform:rotate(20deg);
}

p{
  margin:-15px 0 0 0;
}

.light{
  border-radius:50%;
  position:absolute;
  left:0;
  right:0;
  width:700px;
  height:700px;
  background:#fff;
  filter:blur(100px);
  opacity:0.3;
  pointer-events:none;
}