A Pen by Jack Cranston on CodePen.
Last active
May 29, 2020 01:51
-
-
Save CodeMyUI/d0ac14a8beb7b123e9ee13f27f71a860 to your computer and use it in GitHub Desktop.
Polaroid images [HTML/CSS]
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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