A couple of containing divs style a row of images as leaning cards.
A Pen by Lynn Fisher on CodePen.
A couple of containing divs style a row of images as leaning cards.
A Pen by Lynn Fisher on CodePen.
<div class="images-basic"> | |
<div> | |
<img src="https://assets.codepen.io/1025350/eleanor.jpg" alt="Eleanor from The Good Place" /> | |
</div> | |
<div> | |
<img src="https://assets.codepen.io/1025350/chidi.jpg" alt="Chidi from The Good Place" /> | |
</div> | |
<div> | |
<img src="https://assets.codepen.io/1025350/jason.jpg" alt="Jason from The Good Place" /> | |
</div> | |
<div> | |
<img src="https://assets.codepen.io/1025350/tahani.jpg" alt="Tahani from The Good Place" /> | |
</div> | |
</div> | |
<div class="images-leaning"> | |
<div> | |
<img src="https://assets.codepen.io/1025350/eleanor.jpg" alt="Eleanor from The Good Place" /> | |
</div> | |
<div> | |
<img src="https://assets.codepen.io/1025350/chidi.jpg" alt="Chidi from The Good Place" /> | |
</div> | |
<div> | |
<img src="https://assets.codepen.io/1025350/jason.jpg" alt="Jason from The Good Place" /> | |
</div> | |
<div> | |
<img src="https://assets.codepen.io/1025350/tahani.jpg" alt="Tahani from The Good Place" /> | |
</div> | |
</div> |
// @lynnandtonic | |
// a.singlediv.com |
$bg-color = #eee | |
$card-transform = perspective(20em) rotateY(1deg) rotateZ(-5deg) skewY(-2deg) skewX(-1deg) scaleX(var(--resize)) | |
$body-w = 800px | |
.images-leaning | |
box-sizing: border-box | |
width: 100% | |
min-width: $body-w | |
margin: 10em auto 0 | |
min-height: 330px | |
position: relative | |
background-repeat: no-repeat | |
background-image: linear-gradient(352deg, transparent 45.2%, | |
#bbb 45.5%, | |
#bbb 45.6%, | |
#ccc 45.8%, | |
$bg-color 60.0%), | |
linear-gradient(30deg, #ccc, #eee 90%) | |
background-size: 100% 32.4em | |
background-position: 50% 100% | |
> div | |
width: 250px | |
position: absolute | |
left: 50% | |
bottom: 7.8em | |
z-index: 0 | |
display: flex | |
justify-content: flex-end | |
// shadows | |
&:before | |
content: '' | |
width: 60% | |
height: 100% | |
position: absolute | |
left: 0 | |
top: 7% | |
z-index: 1 | |
background-repeat: no-repeat | |
background-image: linear-gradient(120deg, transparent 42%, | |
alpha(black,.15) 45%, | |
alpha(black,.35) 65%), | |
linear-gradient( 20deg, transparent 38%, | |
alpha(black,.25) 45%, | |
alpha(black,.23) 55%, | |
alpha(black,.13) 75%), | |
radial-gradient(ellipse at 50% 100%, alpha(black,.15) 3%, transparent 40%) | |
transform: rotate(-8deg) | |
// shading on image | |
&:after | |
content: '' | |
width: 60% | |
height: 100% | |
position: absolute | |
z-index: 3 | |
background-image: linear-gradient(45deg, alpha(black,.3), transparent 70%), | |
linear-gradient(45deg, alpha(white,0) 60%, alpha(white,.3) 80%) | |
transform: $card-transform | |
> img | |
width: 60% | |
height: 100% | |
display: block | |
position: relative | |
z-index: 2 | |
border-left: .2em solid | |
border-image: linear-gradient(105deg, transparent .5%, #aaa .7%) 1 | |
box-shadow: .1em .2em 0 -.1em #666 | |
filter: saturate(90%) | |
transform: $card-transform | |
&:nth-of-type(4) | |
--resize: .99 | |
margin-left: -40.4em | |
&:before | |
background-size: 100% 85%, 100% 15%, 100% 10% | |
background-position: .1em 0, 0 100%, -3em 83% | |
&:nth-of-type(3) | |
--resize: .96 | |
margin-left: -15.3em | |
transform: scaleY(.98) translate(-8em,-2.1em) | |
&:before | |
background-size: 100% 84%, 100% 16%, 100% 10% | |
background-position: .4em 0, 0 100%, -3em 81% | |
&:nth-of-type(2) | |
--resize: .925 | |
margin-left: 10em | |
transform: scaleY(.965) translate(-17em,-4.2em) | |
&:before | |
background-size: 100% 83%, 100% 17%, 100% 10% | |
background-position: .6em 0, .1em 100%, -3em 81% | |
&:nth-of-type(1) | |
--resize: .895 | |
margin-left: 35.2em | |
transform: scaleY(.94) translate(-26.6em,-6.2em) | |
&:before | |
background-size: 100% 82%, 100% 18%, 100% 10% | |
background-position: .8em 0, .1em 100%, -3em 80% | |
html, | |
body | |
min-height: 100vh | |
min-width: $body-w | |
body | |
margin: 0 auto | |
padding: 0 | |
display: flex | |
flex-direction: column | |
justify-content: space-between | |
background-color: $bg-color | |
font-size: 10px | |
.images-basic | |
width: 600px | |
padding: 5em 0 | |
margin: 0 auto | |
display: flex | |
justify-content: space-between | |
flex-direction: row-reverse | |
> div | |
width: 130px | |
img | |
width: 100% | |
display: block |