我有一个卡片网格,当我将鼠标悬停在一张卡片上时,这张卡片的底部会展开以显示更多内容。
问题是,当它扩展时,它会将所有其他卡向下推。相反,我希望它能将自己分层在位于下方的卡片之上。这里有一些图像可以形象化我在说什么。
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;
}
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>