Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Last active May 29, 2020
Embed
What would you like to do?
Polaroid images [HTML/CSS]
<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>
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment