CSS：在悬停时展开时让卡片浮在其他卡片的顶部，而不是将它们向下推

Question

我有一个卡片网格，当我将鼠标悬停在一张卡片上时，这张卡片的底部会展开以显示更多内容。

问题是，当它扩展时，它会将所有其他卡向下推。相反，我希望它能将自己分层在位于下方的卡片之上。这里有一些图像可以形象化我在说什么。

CodePen 示例：https://codepen.io/adrenaline681/pen/qBMqrEy

正如您在这里看到的，下面是空白区域：

这是我希望的示例。可以看到，中间的卡只是在底卡的上面展开，并没有向下推

这是 CSS 的样子：

.grid {
  display: grid;
  width: 60%;
  margin: 0 auto;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px;
}

.card {
   transition: all 0.3s linear;
}

.card:hover {
  transform: scale(1.04)
}

.card:hover .description {
  max-height: 100px;
}
  
.image {
  aspect-ratio: 1.6;
  background-color: #516d9b;
  display: flex; 
  justify-content: center; 
  align-items: center;
}

.title {
  display: flex; 
  justify-content: center; 
  align-items: center;
  height: 100px;
  background-color: #3f8539;
}

.description {
  transition: all 0.3s linear;
  display: flex; 
  justify-content: center; 
  align-items: center;
  max-height: 0;
  overflow: hidden;
  height: 100px;
  background-color: #c99753;
  padding-left: 25px;
}

Answer 1

Stack Overflow 上不需要 Codepens。我们有片段！

.grid {
  display: grid;
  width: 60%;
  margin: 0 auto;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px;
}

.card {
  position: relative;
}

.card:hover .description {
  display: block;
  position: absolute;
  top: 100%;
}
  
.image {
  aspect-ratio: 1.6;
  background-color: #516d9b;
  display: flex; 
  justify-content: center; 
  align-items: center;
}

.title {
  display: flex; 
  justify-content: center; 
  align-items: center;
  height: 100px;
  background-color: #3f8539;
}

.description {
  display: none;
  overflow: hidden;
  background-color: #c99753;
  padding-left: 25px;
  z-index: 5;
}

<div class="grid">
  <div class="card">
    <div class="image">Aspect ratio 1.6</div>
    <div class="title">Fixed height 100px</div>
    <div class="description">Dynamic height depending on content length. Dynamic height depending on content length.</div>
  </div>
  <div class="card">
    <div class="image">Aspect ratio 1.6</div>
    <div class="title">Fixed height 100px</div>
    <div class="description">Dynamic height depending on content length</div>
  </div> 
  <div class="card">
    <div class="image">Aspect ratio 1.6</div>
    <div class="title">Fixed height 100px</div>
    <div class="description">Dynamic height depending on content length</div>
  </div>  
  <div class="card">
    <div class="image">Aspect ratio 1.6</div>
    <div class="title">Fixed height 100px</div>
    <div class="description">Dynamic height depending on content length</div>
  </div>  
  <div class="card">
    <div class="image">Aspect ratio 1.6</div>
    <div class="title">Fixed height 100px</div>
    <div class="description">Dynamic height depending on content length</div>
  </div>  
  <div class="card">
    <div class="image">Aspect ratio 1.6</div>
    <div class="title">Fixed height 100px</div>
    <div class="description">Dynamic height depending on content length</div>
  </div>  
  <div class="card">
    <div class="image">Aspect ratio 1.6</div>
    <div class="title">Fixed height 100px</div>
    <div class="description">Dynamic height depending on content length</div>
  </div>  
  <div class="card">
    <div class="image">Aspect ratio 1.6</div>
    <div class="title">Fixed height 100px</div>
    <div class="description">Dynamic height depending on content length. Dynamic height depending on content length</div>
  </div>  
  <div class="card">
    <div class="image">Aspect ratio 1.6</div>
    <div class="title">Fixed height 100px</div>
    <div class="description">Dynamic height depending on content length</div>
  </div>  
  <div class="card">
    <div class="image">Aspect ratio 1.6</div>
    <div class="title">Fixed height 100px</div>
    <div class="description">Dynamic height depending on content length</div>
  </div>  
  <div class="card">
    <div class="image">Aspect ratio 1.6</div>
    <div class="title">Fixed height 100px</div>
    <div class="description">Dynamic height depending on content length</div>
  </div>  
  <div class="card">
    <div class="image">Aspect ratio 1.6</div>
    <div class="title">Fixed height 100px</div>
    <div class="description">Dynamic height depending on content length</div>
  </div> 
    
</div>