Outline Card Stack
Inspired by The Outline.
A work in progress.
Outline Card Stack is an HTML and CSS experiment inspired by the card stack elements found on The Outline. It’s a bit hacky and isn’t meant for critical or prime-time things, but it’s a cool effect.
Tested on:
You can get the original code that runs this entire demo on Github.
Create the card stack by creating a div with class .card-stack
.
<div class="card-stack">
</div>
Add cards by creating a div with class .card-stack-card
. 5 cards create the main card stack, the rest will be hidden. On :hover
, a 6th card is shown on the end of the stack.
<div class="card-stack-card">
<!-- Your content goes here -->
</div>
Add a div with class .card-stack-card-end
to create some spacing on the end of the deck on :hover
.
<div class="card-stack-card-end"></div>
The CSS markup for making this work is contained the _app.scss
file of the Github repo