30 CSS Hover Effects 18 / 30

CSS Stack Lift Card Hover Effect

Four stacked card hover effects — single card lift with shadow bloom, layered deck fan-out, cascading z-lift, and magnetic group hover — using translateY, box-shadow, and sibling selectors to create physical depth when hovering a stack of UI cards.

Pure CSS MIT licensed
Live Demo Open in tab

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

Open in playground

The code

<div class="hv-18">
  <div class="hv-18__demos">
    <div class="hv-18__demo">
      <div class="hv-18__single">
        <div class="hv-18__card hv-18__card--single">
          <div class="hv-18__icon">◈</div>
          <h3 class="hv-18__title">Lift Me</h3>
          <p class="hv-18__text">Single card rise and shadow bloom.</p>
        </div>
      </div>
      <span class="hv-18__label">shadow bloom lift</span>
    </div>
    <div class="hv-18__demo">
      <div class="hv-18__deck">
        <div class="hv-18__card hv-18__card--deck hv-18__card--d1">
          <div class="hv-18__icon">★</div>
          <h3 class="hv-18__title">Fan Out</h3>
        </div>
        <div class="hv-18__card hv-18__card--deck hv-18__card--d2"></div>
        <div class="hv-18__card hv-18__card--deck hv-18__card--d3"></div>
      </div>
      <span class="hv-18__label">sibling fan-out</span>
    </div>
    <div class="hv-18__demo">
      <div class="hv-18__cascade">
        <div class="hv-18__card hv-18__card--cas hv-18__card--c1">
          <span class="hv-18__num">01</span>
        </div>
        <div class="hv-18__card hv-18__card--cas hv-18__card--c2">
          <span class="hv-18__num">02</span>
        </div>
        <div class="hv-18__card hv-18__card--cas hv-18__card--c3">
          <span class="hv-18__num">03</span>
        </div>
      </div>
      <span class="hv-18__label">cascade z-lift</span>
    </div>
    <div class="hv-18__demo">
      <div class="hv-18__group">
        <div class="hv-18__card hv-18__card--grp">A</div>
        <div class="hv-18__card hv-18__card--grp">B</div>
        <div class="hv-18__card hv-18__card--grp">C</div>
      </div>
      <span class="hv-18__label">group isolation</span>
    </div>
  </div>
</div>
.hv-18,.hv-18 *,.hv-18 *::before,.hv-18 *::after{box-sizing:border-box;margin:0;padding:0}
.hv-18 ::selection{background:#0f766e;color:#fff}
.hv-18{
  --bg:#020c08;
  --text:#d1fae5;
  --dim:#6b7280;
  --green:#10b981;
  --teal:#14b8a6;
  --emerald:#059669;
  --sage:#6ee7b7;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:60px 24px;
}
.hv-18__demos{
  display:grid;grid-template-columns:repeat(2,1fr);gap:40px;
  max-width:760px;width:100%;
}
.hv-18__demo{
  display:flex;flex-direction:column;align-items:center;gap:20px;
  padding:40px 24px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
}
.hv-18__label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

/* shared card */
.hv-18__card{border-radius:12px;cursor:pointer}
.hv-18__icon{font-size:1.6rem;color:var(--green)}
.hv-18__title{font-size:.95rem;font-weight:700;color:var(--text)}
.hv-18__text{font-size:.8rem;color:var(--dim);line-height:1.4}
.hv-18__num{font-size:1.6rem;font-weight:900;color:var(--text)}

/* 1 — single lift */
.hv-18__single{padding-bottom:24px}
.hv-18__card--single{
  padding:24px;width:200px;
  background:rgba(16,185,129,.12);
  border:1px solid rgba(16,185,129,.25);
  display:flex;flex-direction:column;gap:10px;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
  transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s;
}
.hv-18__card--single:hover{
  transform:translateY(-14px);
  box-shadow:0 28px 56px rgba(0,0,0,.5),0 0 24px rgba(16,185,129,.2);
}

/* 2 — deck fan-out */
.hv-18__deck{position:relative;width:180px;height:160px}
.hv-18__card--deck{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  border:1px solid rgba(255,255,255,.1);
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.hv-18__card--d1{background:rgba(16,185,129,.2);z-index:3}
.hv-18__card--d2{background:rgba(5,150,105,.15);z-index:2;transform:translateY(8px)}
.hv-18__card--d3{background:rgba(4,120,87,.1);z-index:1;transform:translateY(16px)}
.hv-18__deck:hover .hv-18__card--d1{transform:translateY(-12px)}
.hv-18__deck:hover .hv-18__card--d2{transform:translateY(4px)}
.hv-18__deck:hover .hv-18__card--d3{transform:translateY(20px)}

/* 3 — cascade */
.hv-18__cascade{
  display:flex;gap:10px;align-items:flex-end;
}
.hv-18__card--cas{
  width:60px;height:100px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.1);
  transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s;
}
.hv-18__card--c1{background:rgba(20,184,166,.2);height:80px}
.hv-18__card--c2{background:rgba(16,185,129,.2);height:100px}
.hv-18__card--c3{background:rgba(5,150,105,.2);height:120px}
.hv-18__card--c1:hover{transform:translateY(-10px);box-shadow:0 12px 30px rgba(0,0,0,.4)}
.hv-18__card--c2:hover{transform:translateY(-14px);box-shadow:0 16px 36px rgba(0,0,0,.4)}
.hv-18__card--c3:hover{transform:translateY(-18px);box-shadow:0 20px 40px rgba(0,0,0,.4)}

/* 4 — group hover isolation */
.hv-18__group{
  display:flex;gap:10px;
}
.hv-18__card--grp{
  width:56px;height:80px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;font-weight:700;color:var(--text);
  border-radius:10px;
  background:rgba(16,185,129,.2);
  border:1px solid rgba(16,185,129,.3);
  transition:transform .3s,opacity .3s,box-shadow .3s;
}
.hv-18__group:hover .hv-18__card--grp{
  opacity:.35;transform:scale(0.95);
}
.hv-18__group:hover .hv-18__card--grp:hover{
  opacity:1;transform:translateY(-10px);
  box-shadow:0 16px 36px rgba(0,0,0,.4);
}

@media(max-width:520px){.hv-18__demos{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .hv-18__card{transition:none!important}
}

How this works

A card lift uses transform: translateY(-12px) on hover combined with a dramatic box-shadow increase — from a tight near shadow (0 4px 12px rgba(0,0,0,.3)) to a deep long shadow (0 24px 48px rgba(0,0,0,.5)). The large vertical offset of the shadow combined with the card moving upward creates a convincing physical separation from the surface.

The deck fan-out uses the CSS general sibling combinator (~) — when the top card's parent :hover is triggered, .card:nth-child(2) gets translateY(8px) and .card:nth-child(3) gets translateY(16px), spreading the stack into a visible fan. No JavaScript is needed. The group hover variant applies a scale(0.96) translateY(4px) to all siblings of the hovered card using .group:hover .card:not(:hover).

Customize

  • Increase lift height from translateY(-12px) to translateY(-20px) for a more dramatic physical separation.
  • Color-code the deck cards with different hues on each :nth-child so fanning out reveals distinct cards rather than identical stacks.
  • Add a rotation to the fan: combine the sibling translateY with a small rotateZ(-3deg) on the second card and rotateZ(-6deg) on the third for a natural scatter.
  • Scale the shadow spread in proportion to lift — a 4px lift needs a shadow of 0 8px 24px; a 20px lift needs 0 32px 60px to look physically consistent.
  • Apply a filter: brightness(1.1) to the hovered card so it also appears more luminous as it rises toward the viewer.

Watch out for

  • CSS sibling selectors (~) only affect elements after the hovered one in the DOM — ensure your stack order in HTML matches the visual stacking order.
  • Deep shadows on translated cards can visually bleed into neighboring grid cells — add overflow: hidden to the grid container or use padding instead of gap to give shadow room.
  • On mobile, :hover persists after touch — the lifted state sticks; this is often desirable for card stacks but test the behavior against your intent.

Browser support

ChromeSafariFirefoxEdge
60+ 10.1+ 55+ 60+

General sibling combinator and box-shadow transitions are universally supported.

More from 30 CSS Hover Effects

CSS Gradient Text Reveal Hover EffectCSS Split Text Hover EffectCSS Neon Glow Text Hover EffectCSS Magnetic Liquid Button Hover EffectCSS Border Draw Hover EffectCSS Shimmer Shine Button Hover EffectCSS Fill Wipe Button Hover EffectCSS 3D Press Button Hover EffectCSS Ripple Button Hover EffectCSS 3D Tilt Card Hover EffectCSS Card Flip Hover EffectCSS Glassmorphism Card Hover Effect
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →