Created
April 13, 2023 01:57
-
-
Save jcarlosroldan/ad1138ad82877263f1d780d18277f798 to your computer and use it in GitHub Desktop.
Accurate Polaroid reveal effect
This file contains hidden or 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
/* See in action at https://codepen.io/juancroldan/pen/vYVLYBx */ | |
.polaroid { | |
background: #eeefea; | |
box-shadow: 0 0 .5px 1px #5415; | |
border-radius: 3px; | |
} | |
.polaroid img { | |
width: 230px; | |
height: 305px; | |
margin: 42px 17px 83px; | |
display: block; | |
object-fit: cover; | |
background: #e8e1d6; | |
filter: contrast(0) sepia(1.6) contrast(.2) brightness(1.7) blur(.5px); | |
transition: filter 12s 2s linear; | |
border-radius: 2px; | |
box-shadow: 0 0 200px rgba(0,0,0,0.9) inset; | |
} | |
.polaroid.squared img { | |
width: 316px; | |
height: 316px; | |
margin: 22px 18px 90px; | |
} | |
.polaroid.reveal img { | |
filter: contrast(0.8) sepia(0.3) contrast(1) brightness(1.2) blur(.5px); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment