CSS Stacked Cards: Simple and Easy way

Probably you've seen this cool effect on some websites where images stack on top of each other, you liked this animation and were wondering how it can be done.

Do I need to use the animation library for that? GSAP? Or maybe Framer Motion.

And the actual answer is no. It can be done with just plain CSS!

Here is the code sample:

<div>
    <div id="layer1" class="bg-red-400  h-screen w-screen flex justify-center items-center top-0 sticky">
        <p>CSS</p>
    </div>
    <div id="layer2" class="bg-orange-400 h-screen w-screen flex justify-center items-center top-0 sticky">
        <p>is</p>
    </div>
    <div id="layer3" class="bg-blue-400 h-screen w-screen flex justify-center items-center top-0 sticky">
        <p>not</p>
    </div>
    <div id="layer4" class="bg-green-400 h-screen w-screen flex justify-center items-center top-0 sticky">
        <p>awesome!</p>
    </div>
</div>

In this example I used TailwindCSS, but you can use whatever you want - plain CSS or any other library.
So, the most important properties here are these two:

• top-0 that sets top to 0

• sticky that sets the position of the card to sticky

And not to forget, all cards are contained within the div - the containing block-level ancestor.

---

And that's it, guys.

I hope that you have learned something new today!
I would appreciate it if you could like this post or leave a comment below!

Also, feel free to follow me on GitHub and Medium!

Adios, mi amigos)