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.
You can get the original code that runs this entire demo on Github.
Create the card stack by creating a div with class
<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
The CSS markup for making this work is contained the
_app.scss file of the Github repo