Expandable Hover Card

teamuiblitz100
Mar 15, 2026 2
Live Preview

Live Editor

<div class="card-wrapper">

  <div class="card fern">
    <span class="label">FERN</span>
  </div>

  <div class="card flora">
    <span class="label">FLORA</span>
  </div>

  <div class="card montero">
    <div class="content">
      <h3>MONTERO</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>

</div>
body{
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#f2f2f2;
  font-family:sans-serif;
}

.card-wrapper{
  display:flex;
  gap:20px;
  width:700px;
}

/* base card */

.card{
  height:320px;
  flex:1;
  border-radius:20px;
  background-size:cover;
  background-position:center;
  position:relative;
  transition:0.5s ease;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:20px;
  color:white;
  cursor:pointer;
}

/* tilt effect */

.card:nth-child(1){ transform:rotate(-12deg); }
.card:nth-child(2){ transform:rotate(-6deg); }
.card:nth-child(3){ transform:rotate(-2deg); }

/* shrink others */

.card-wrapper:hover .card{
  flex:0.7;
}

/* hover card */

.card:hover{
  flex:3;
  transform:rotate(0deg);
}

/* images */

.fern{
  background-image:url("https://images.unsplash.com/photo-1501004318641-b39e6451bec6");
}

.flora{
  background-image:url("https://images.unsplash.com/photo-1490750967868-88aa4486c946");
}

.montero{
  background-image:url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee");
}

/* vertical text */

.label{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-weight:bold;
  letter-spacing:3px;
}

/* content */

.content{
  opacity:0;
  transform:translateY(20px);
  transition:0.4s;
}

.card:hover .content{
  opacity:1;
  transform:translateY(0);
}

.card:hover .label{
  display:none;
}

.content h3{
  margin:0;
  font-size:28px;
}

.content p{
  font-size:14px;
  max-width:250px;
}
const cards = document.querySelectorAll(".card");

cards.forEach(card=>{
  card.addEventListener("click",()=>{
    cards.forEach(c=>c.classList.remove("active"));
    card.classList.add("active");
  });
});
Categories

Expandable Hover Card

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet

AI Code Assistant
