3D STACKED CARDS

jitesh208
Jan 17, 2026 4
Live Preview

Live Editor

<div class="deck">
  <div class="travel-card left">
    <img src="https://images.unsplash.com/photo-1568322445389-f64ac2515020?auto=format&fit=crop&w=800&q=80
" />
    <h4>The Great Pyramid</h4>
    <button>Book Now</button>
  </div>

  <div class="travel-card center">
    <img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee" />
    <h4>Cappadocia</h4>
    <button>Book Now</button>
  </div>

  <div class="travel-card right">
    <img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470" />
    <h4>Great Wall</h4>
    <button>Book Now</button>
  </div>
</div>
body{
  height:100vh;
  display:grid;
  place-items:center;
  background:#f2f2f2;
  font-family:system-ui;
}

.deck{
  position:relative;
  width:420px;
  height:300px;
  perspective:1200px;
}

.travel-card{
  position:absolute;
  width:240px;
  height:300px;
  border-radius:26px;
  background:#fff;
  box-shadow:0 30px 60px rgba(0,0,0,.25);
  overflow:hidden;
  transition:0.6s cubic-bezier(.16,1,.3,1);
  cursor:pointer;
}

/* Images */
.travel-card img{
  width:100%;
  height:190px;
  object-fit:cover;
}

.travel-card h4{
  margin:14px;
  font-size:16px;
}

.travel-card button{
  margin:0 14px;
  width:calc(100% - 28px);
  padding:12px;
  border:none;
  border-radius:20px;
  background:#111;
  color:#fff;
  cursor:pointer;
}

/* Initial stacked positions */
.left{
  transform:
    translateX(-120px)
    rotateY(18deg)
    scale(.92);
  z-index:1;
}

.center{
  transform:
    translateZ(60px)
    scale(1);
  z-index:3;
}

.right{
  transform:
    translateX(120px)
    rotateY(-18deg)
    scale(.92);
  z-index:1;
}

/* 🔥 HOVER MAGIC */
.deck:hover .left{
  transform:
    translateX(-160px)
    rotateY(30deg)
    scale(.88);
}

.deck:hover .right{
  transform:
    translateX(160px)
    rotateY(-30deg)
    scale(.88);
}

.deck:hover .center{
  transform:
    translateZ(100px)
    scale(1.05);
  box-shadow:0 50px 90px rgba(0,0,0,.35);
}
Categories

3D STACKED CARDS

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
