DEV Community

Cover image for CSS Stacked Cards: Simple and Easy way
Kairat
Kairat

Posted on

5 1 1

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.

Stacked Cards using CSS demonstration

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!

What if I told you CSS could do that meme

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>


Enter fullscreen mode Exit fullscreen mode

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)

Bye bye dear friend

Imagine monitoring actually built for developers

Billboard image

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

Top comments (0)

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay