15 Stunning Stacked Cards Hover & Click Effects

A collection of 15 beautiful and interactive stacked cards effects using HTML, CSS, and minimal JavaScript. Watch the cards expand smoothly on hover and neatly separate out on click.

Feb 7, 2026

15 Stunning Stacked Cards Hover & Click Effects

Demo Download

Stacked cards are a visually pleasing way to hint at more content without cluttering your UI. In this snippet, we will implement 15 completely unique effects for stacked cards.

When you hover over the top card, the stacked cards behind it will slightly expand, rotate, or peek out in different creative ways. When you click, the cards neatly unravel and expand entirely, adding space between them.

Let’s dive into the code!

HTML Structure

The structure remains identical for all effects. We use a container .card-stack followed by an effect class (e.g., .effect-1) and three .card elements stacked inside.

<div class="grid-container">
  <!-- Effect 1: Slide Up -->
  <div class="card-stack effect-1">
    <div class="card card-3"></div>
    <div class="card card-2"></div>
    <div class="card card-1">
      <div class="content">
        <h3>1. Slide Up</h3>
        <p>Hover & Click Me</p>
      </div>
    </div>
  </div>

  <!-- Effect 2: Slide Right -->
  <div class="card-stack effect-2">
    <div class="card card-3"></div>
    <div class="card card-2"></div>
    <div class="card card-1">
      <div class="content">
        <h3>2. Slide Right</h3>
        <p>Hover & Click Me</p>
      </div>
    </div>
  </div>

  <!-- Effect 3: Slide Down -->
  <div class="card-stack effect-3">
    <div class="card card-3"></div>
    <div class="card card-2"></div>
    <div class="card card-1">
      <div class="content">
        <h3>3. Slide Down</h3>
        <p>Hover & Click Me</p>
      </div>
    </div>
  </div>

  <!-- Effect 4: Slide Left -->
  <div class="card-stack effect-4">
    <div class="card card-3"></div>
    <div class="card card-2"></div>
    <div class="card card-1">
      <div class="content">
        <h3>4. Slide Left</h3>
        <p>Hover & Click Me</p>
      </div>
    </div>
  </div>

  <!-- Effect 5: Diagonal TR -->
  <div class="card-stack effect-5">
    <div class="card card-3"></div>
    <div class="card card-2"></div>
    <div class="card card-1">
      <div class="content">
        <h3>5. Diagonal TR</h3>
        <p>Hover & Click Me</p>
      </div>
    </div>
  </div>

  <!-- Effect 6: Diagonal BR -->
  <div class="card-stack effect-6">
    <div class="card card-3"></div>
    <div class="card card-2"></div>
    <div class="card card-1">
      <div class="content">
        <h3>6. Diagonal BR</h3>
        <p>Hover & Click Me</p>
      </div>
    </div>
  </div>

  <!-- Effect 7: Fan Rotate -->
  <div class="card-stack effect-7">
    <div class="card card-3"></div>
    <div class="card card-2"></div>
    <div class="card card-1">
      <div class="content">
        <h3>7. Fan Rotate</h3>
        <p>Hover & Click Me</p>
      </div>
    </div>
  </div>

  <!-- Effect 8: Dual Fan Rotate -->
  <div class="card-stack effect-8">
    <div class="card card-3"></div>
    <div class="card card-2"></div>
    <div class="card card-1">
      <div class="content">
        <h3>8. Dual Fan Rotate</h3>
        <p>Hover & Click Me</p>
      </div>
    </div>
  </div>

  <!-- Effect 9: Scale Reveal -->
  <div class="card-stack effect-9">
    <div class="card card-3"></div>
    <div class="card card-2"></div>
    <div class="card card-1">
      <div class="content">
        <h3>9. Scale Reveal</h3>
        <p>Hover & Click Me</p>
      </div>
    </div>
  </div>

  <!-- Effect 10: Stack Spread V -->
  <div class="card-stack effect-10">
    <div class="card card-3"></div>
    <div class="card card-2"></div>
    <div class="card card-1">
      <div class="content">
        <h3>10. Stack Spread V</h3>
        <p>Hover & Click Me</p>
      </div>
    </div>
  </div>

  <!-- Effect 11: Stack Spread H -->
  <div class="card-stack effect-11">
    <div class="card card-3"></div>
    <div class="card card-2"></div>
    <div class="card card-1">
      <div class="content">
        <h3>11. Stack Spread H</h3>
        <p>Hover & Click Me</p>
      </div>
    </div>
  </div>

  <!-- Effect 12: 3D Lift -->
  <div class="card-stack effect-12">
    <div class="card card-3"></div>
    <div class="card card-2"></div>
    <div class="card card-1">
      <div class="content">
        <h3>12. 3D Lift</h3>
        <p>Hover & Click Me</p>
      </div>
    </div>
  </div>

  <!-- Effect 13: Random Scatter -->
  <div class="card-stack effect-13">
    <div class="card card-3"></div>
    <div class="card card-2"></div>
    <div class="card card-1">
      <div class="content">
        <h3>13. Random Scatter</h3>
        <p>Hover & Click Me</p>
      </div>
    </div>
  </div>

  <!-- Effect 14: Accordion Left -->
  <div class="card-stack effect-14">
    <div class="card card-3"></div>
    <div class="card card-2"></div>
    <div class="card card-1">
      <div class="content">
        <h3>14. Accordion Left</h3>
        <p>Hover & Click Me</p>
      </div>
    </div>
  </div>

  <!-- Effect 15: Cross Unfold -->
  <div class="card-stack effect-15">
    <div class="card card-3"></div>
    <div class="card card-2"></div>
    <div class="card card-1">
      <div class="content">
        <h3>15. Cross Unfold</h3>
        <p>Hover & Click Me</p>
      </div>
    </div>
  </div>
</div>

CSS Styling & Animations

Here is the magic. We’ll set a base style for the stack and the cards. Then, we apply 15 unique hover and active (click) states using transitions.

/* Base Container & Grid */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 80px 40px;
  padding: 60px 20px;
  background-color: #f7f9fc;
}

/* Base Stack Setup */
.card-stack {
  position: relative;
  width: 250px;
  height: 160px;
  cursor: pointer;
  margin: 0 auto;
}

.card {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;
  border-radius: 16px;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* Main Top Card */
.card-1 { 
  z-index: 3; 
  background: #ffffff; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  text-align: center;
  border: 1px solid #eef2f6;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.card-1 .content h3 {
  margin: 0 0 5px 0;
  font-size: 1.2rem;
  color: #1a202c;
  font-family: system-ui, -apple-system, sans-serif;
}
.card-1 .content p {
  margin: 0;
  font-size: 0.85rem;
  color: #718096;
  font-family: system-ui, -apple-system, sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Cards behind the main card */
.card-2 { z-index: 2; background: #e2e8f0; }
.card-3 { z-index: 1; background: #cbd5e0; }

/* ========================================================= */
/* 15 EFFECTS (Hover & Active/Click States)                  */
/* ========================================================= */

/* Default Stack Position for all effects */
.card-stack .card-2 { transform: translateY(8px) scale(0.95); }
.card-stack .card-3 { transform: translateY(16px) scale(0.9); }

/* Effect 1: Slide Up */
.card-stack.effect-1:hover .card-2 { transform: translateY(-15px) scale(0.95); }
.card-stack.effect-1:hover .card-3 { transform: translateY(-30px) scale(0.90); }
.card-stack.effect-1.active .card-2 { transform: translateY(-110%) scale(1); }
.card-stack.effect-1.active .card-3 { transform: translateY(-220%) scale(1); }

/* Effect 2: Slide Right */
.card-stack.effect-2:hover .card-2 { transform: translateX(20px) translateY(8px) scale(0.95); }
.card-stack.effect-2:hover .card-3 { transform: translateX(40px) translateY(16px) scale(0.90); }
.card-stack.effect-2.active .card-2 { transform: translateX(110%) translateY(0) scale(1); }
.card-stack.effect-2.active .card-3 { transform: translateX(220%) translateY(0) scale(1); }

/* Effect 3: Slide Down */
.card-stack.effect-3:hover .card-2 { transform: translateY(25px) scale(0.95); }
.card-stack.effect-3:hover .card-3 { transform: translateY(45px) scale(0.90); }
.card-stack.effect-3.active .card-2 { transform: translateY(110%) scale(1); }
.card-stack.effect-3.active .card-3 { transform: translateY(220%) scale(1); }

/* Effect 4: Slide Left */
.card-stack.effect-4:hover .card-2 { transform: translateX(-20px) translateY(8px) scale(0.95); }
.card-stack.effect-4:hover .card-3 { transform: translateX(-40px) translateY(16px) scale(0.90); }
.card-stack.effect-4.active .card-2 { transform: translateX(-110%) translateY(0) scale(1); }
.card-stack.effect-4.active .card-3 { transform: translateX(-220%) translateY(0) scale(1); }

/* Effect 5: Diagonal Top Right */
.card-stack.effect-5:hover .card-2 { transform: translate(15px, -15px) scale(0.95); }
.card-stack.effect-5:hover .card-3 { transform: translate(30px, -30px) scale(0.90); }
.card-stack.effect-5.active .card-2 { transform: translate(105%, -105%) scale(1); }
.card-stack.effect-5.active .card-3 { transform: translate(210%, -210%) scale(1); }

/* Effect 6: Diagonal Bottom Right */
.card-stack.effect-6:hover .card-2 { transform: translate(15px, 20px) scale(0.95); }
.card-stack.effect-6:hover .card-3 { transform: translate(30px, 40px) scale(0.90); }
.card-stack.effect-6.active .card-2 { transform: translate(105%, 105%) scale(1); }
.card-stack.effect-6.active .card-3 { transform: translate(210%, 210%) scale(1); }

/* Effect 7: Fan Rotate */
.card-stack.effect-7 .card { transform-origin: bottom right; }
.card-stack.effect-7:hover .card-2 { transform: translateY(8px) rotate(-8deg) scale(0.95); }
.card-stack.effect-7:hover .card-3 { transform: translateY(16px) rotate(-16deg) scale(0.90); }
.card-stack.effect-7.active .card-2 { transform: rotate(-30deg) translateY(-20px) scale(1); }
.card-stack.effect-7.active .card-3 { transform: rotate(-60deg) translateY(-40px) scale(1); }

/* Effect 8: Dual Fan Rotate */
.card-stack.effect-8 .card { transform-origin: bottom center; }
.card-stack.effect-8:hover .card-2 { transform: translateY(8px) rotate(-8deg) scale(0.95); }
.card-stack.effect-8:hover .card-3 { transform: translateY(8px) rotate(8deg) scale(0.95); }
.card-stack.effect-8.active .card-2 { transform: translateX(-110%) rotate(-5deg) scale(1); }
.card-stack.effect-8.active .card-3 { transform: translateX(110%) rotate(5deg) scale(1); }

/* Effect 9: Scale Reveal */
.card-stack.effect-9 .card-2 { transform: scale(0.9); opacity: 0; }
.card-stack.effect-9 .card-3 { transform: scale(0.8); opacity: 0; }
.card-stack.effect-9:hover .card-2 { transform: scale(1.05); opacity: 0.5; }
.card-stack.effect-9:hover .card-3 { transform: scale(1.1); opacity: 0.2; }
.card-stack.effect-9.active .card-1 { transform: scale(0.95); }
.card-stack.effect-9.active .card-2 { transform: translateX(-110%) scale(1); opacity: 1; }
.card-stack.effect-9.active .card-3 { transform: translateX(110%) scale(1); opacity: 1; }

/* Effect 10: Stack Spread Vertical */
.card-stack.effect-10:hover .card-2 { transform: translateY(-30px) scale(0.95); }
.card-stack.effect-10:hover .card-3 { transform: translateY(30px) scale(0.95); }
.card-stack.effect-10.active .card-2 { transform: translateY(-110%) scale(1); }
.card-stack.effect-10.active .card-3 { transform: translateY(110%) scale(1); }

/* Effect 11: Stack Spread Horizontal */
.card-stack.effect-11:hover .card-2 { transform: translateX(-40px) translateY(8px) scale(0.95); }
.card-stack.effect-11:hover .card-3 { transform: translateX(40px) translateY(8px) scale(0.95); z-index: 2; }
.card-stack.effect-11.active .card-2 { transform: translateX(-110%) scale(1); }
.card-stack.effect-11.active .card-3 { transform: translateX(110%) scale(1); }

/* Effect 12: 3D Lift */
.card-stack.effect-12 { perspective: 1000px; }
.card-stack.effect-12 .card { transform-style: preserve-3d; }
.card-stack.effect-12 .card-2 { transform: translateZ(-20px) translateY(8px); }
.card-stack.effect-12 .card-3 { transform: translateZ(-40px) translateY(16px); }
.card-stack.effect-12:hover .card-1 { transform: translateZ(40px); }
.card-stack.effect-12:hover .card-2 { transform: translateZ(20px) translateY(-10px); }
.card-stack.effect-12:hover .card-3 { transform: translateZ(0) translateY(-20px); }
.card-stack.effect-12.active .card-1 { transform: translateZ(50px) translateY(-100px); }
.card-stack.effect-12.active .card-2 { transform: translateZ(25px) translateY(0); }
.card-stack.effect-12.active .card-3 { transform: translateZ(0) translateY(100px); }

/* Effect 13: Random Scatter */
.card-stack.effect-13 .card-2 { transform: rotate(2deg) translateY(8px) scale(0.95); }
.card-stack.effect-13 .card-3 { transform: rotate(-2deg) translateY(16px) scale(0.90); }
.card-stack.effect-13:hover .card-2 { transform: rotate(-8deg) translateX(-15px) translateY(4px) scale(0.95); }
.card-stack.effect-13:hover .card-3 { transform: rotate(12deg) translateX(20px) translateY(8px) scale(0.90); }
.card-stack.effect-13.active .card-2 { transform: translateX(-110%) rotate(-10deg) scale(1); }
.card-stack.effect-13.active .card-3 { transform: translateX(110%) rotate(10deg) scale(1); }

/* Effect 14: Accordion Left */
.card-stack.effect-14:hover .card-2 { transform: translateX(-15px) translateY(8px) scale(0.95); }
.card-stack.effect-14:hover .card-3 { transform: translateX(-30px) translateY(16px) scale(0.90); }
.card-stack.effect-14.active .card-1 { transform: translateX(110%); }
.card-stack.effect-14.active .card-2 { transform: translateX(0) scale(1); }
.card-stack.effect-14.active .card-3 { transform: translateX(-110%) scale(1); }

/* Effect 15: Cross Unfold */
.card-stack.effect-15:hover .card-2 { transform: translateX(-/15px) translateY(-15px) scale(0.95); }
.card-stack.effect-15:hover .card-3 { transform: translateX(15px) translateY(15px) scale(0.90); z-index: 4; }
.card-stack.effect-15.active .card-2 { transform: translateX(-110%) translateY(-110%) scale(1); }
.card-stack.effect-15.active .card-3 { transform: translateX(110%) translateY(110%) scale(1); }

JavaScript Logic

A tiny bit of JavaScript is needed to simply toggle the .active class when a card stack is clicked. This allows checking the fully expanded view for all 15 components.

document.addEventListener("DOMContentLoaded", () => {
  const cardStacks = document.querySelectorAll('.card-stack');

  cardStacks.forEach(stack => {
    stack.addEventListener('click', () => {
      // Toggle the active class on click for all elements inside
      stack.classList.toggle('active');
    });
  });
});

These 15 effects range from a simple slide up to complex 3D perspective reveals. They are incredibly dynamic when integrated smoothly into portfolios, pricing tables, feature lists, or beautiful UI sets. Enjoy creating magic with CSS!

Demo Download

Back to snippets