Polaroid images [HTML/CSS]
A Pen by Jack Cranston on CodePen.
<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> |
A Pen by Jack Cranston on CodePen.
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; | |
} |