Skip to content

Instantly share code, notes, and snippets.

@jmxt3

jmxt3/css-folded-poster-effect.markdown

Created June 30, 2020 21:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jmxt3/af74cf889afefe3a619802436f4f21fe to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jmxt3/af74cf889afefe3a619802436f4f21fe to your computer and use it in GitHub Desktop.
Download ZIP
CSS folded poster effect
Raw
css-folded-poster-effect.markdown
Raw
index.html
<div class="container">
<img src="https://assets.codepen.io/1025350/schitts-creek.png" alt="the cast of Schitt’s Creek" />
<div class="poster">
<img src="https://assets.codepen.io/1025350/schitts-creek.png" alt="the cast of Schitt’s Creek" />
</div>
<img src="https://assets.codepen.io/1025350/newfoundglory.png" alt="New Found Glory tour poster: 20 years of pop punk" />
<div class="poster">
<img src="https://assets.codepen.io/1025350/newfoundglory.png" alt="New Found Glory tour poster: 20 years of pop punk" />
</div>
<img src="https://assets.codepen.io/1025350/paper-heart.png" alt="movie poster for Charlyne Yi’s Paper Heart" />
<div class="poster">
<img src="https://assets.codepen.io/1025350/paper-heart.png" alt="movie poster for Charlyne Yi’s Paper Heart" />
</div>
</div>
Raw
style.stylus
.poster
width: 300px
padding: 7%
position: relative
box-sizing: border-box
background-color: white
box-shadow: 0 3px 12px alpha(black,.2)
filter: saturate(70%) contrast(85%)
img
width: 100%
display: block
z-index: 1
&:before,
&:after
content: ''
width: 100%
left: 0
position: absolute
&:before
height: 4%
bottom: -4%
background-repeat: no-repeat
background-image: linear-gradient(177deg, alpha(black,.22) 10%, transparent 50%),
linear-gradient(-177deg, alpha(black,.22) 10%, transparent 50%)
background-size: 49% 100%
background-position: 2% 0,
98% 0
&:after
height: 100%
top: 0
z-index: 2
background-repeat: no-repeat
background-image: linear-gradient(to right, alpha(white,.1) .5%, alpha(black,.15) 1.2%, transparent 1.2%),
linear-gradient(to bottom, alpha(white,.1) .5%, alpha(black,.15) 1.2%, transparent 1.2%),
linear-gradient(to bottom, alpha(white,.1) .5%, alpha(black,.15) 1.2%, transparent 1.2%),
linear-gradient(265deg, alpha(black,.2), transparent 10%),
linear-gradient(5deg, alpha(black,.2), transparent 15%),
linear-gradient(-5deg, alpha(black,.1.6), transparent 10%),
linear-gradient(5deg, alpha(black,.1.6), transparent 10%),
linear-gradient(-265deg, alpha(black,.2), transparent 10%),
linear-gradient(-5deg, alpha(black,.2), transparent 15%),
linear-gradient(266deg, alpha(black,.2), transparent 10%)
background-size: 50% 100%,
100% 33.3333%,
100% 33.3333%,
50% 33.3333%,
50% 33.3333%,
50% 33.3333%,
50% 33.3333%,
50% 33.3333%,
50% 33.3333%,
50% 33.3333%
background-position: right top,
left center,
left bottom,
left top,
left top,
right top,
left center,
right center,
right center,
left bottom
body
background-color: lightsalmon
padding: 60px 20px
.container
width: 650px
display: grid
grid-template-columns: 1fr 1fr
align-items: center
justify-items: center
gap: 60px 30px
margin: 0 auto
> img
width: 250px
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment