英文:
Make card float top of other cards when expanding on hover instead of pushing them down
问题
我有一组卡片，当我悬停在一张卡片上时，该卡片的底部区域会展开，显示更多内容。
问题是，当它展开时，它会将所有其他卡片推下去。相反，我希望它能够覆盖位于下方的卡片。以下是一些图像，可视化说明我的意思。
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;
}
英文:
I have a grid of cards and when I hover over one card the bottom section of this card expands to show more content.
The problem is that when it expands it pushes all other cards down. Instead, I would like it to layer itself on top of the card that is situated underneath. Here are some images to visualize what I'm talking about.
CodePen Example: https://codepen.io/adrenaline681/pen/qBMqrEy
As you can see here there is empty white space underneath:
And here is an example of how I would like it to be. As you can see, the middle card has just expanded on top of the bottom card without pushing it down:
Here is how the CSS looks like:
.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;
}
答案1
得分: 2
如果你不在意保留过渡效果，Brett 的解决方案简单且有效。如果你想保留过渡效果，那么你需要一种方法来强制描述面板在其后续兄弟元素之上滑动。为此，你可以在鼠标悬停的卡片上添加 z-index，而不是在描述上。
.card:hover {
transform: scale(1.04);
/* 将此卡片推送到兄弟元素之上 */
z-index: 100;
}
这是你的翻译，如果有其他需要，随时告诉我。
英文:
If you don't care about keeping the transitions, the solution by Brett is simple and works. If you do want the transitions, then you'll need a way to force the description panel to slide above its subsequent siblings. To do that you can add z-index to the card that is hovered instead of the description.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.card {
position: relative;
transition: transform 0.3s ease-in-out;
}
.card:hover {
transform: scale(1.04);
/* push this card above siblings */
z-index: 100;
}
.card:hover .description {
max-height: 100%; /* set max-height to 100% */
padding: 1rem; /* add the padding to top and bottom */
}
.image {
aspect-ratio: 1.6;
background-color: #516d9b;
}
.title {
height: 100px;
background-color: #3f8539;
padding: 1rem;
}
.description {
transition: all 0.3s ease-in-out;
overflow: hidden;
max-height: 0;
height: max-content; /* dynamic height */
background-color: #c99753;
position: absolute;
top: 100%;
padding: 0 1rem; /* add padding left and right */
}
/* not important */
* {
box-sizing: border-box;
}
body {
width: 60%;
min-width: 30rem;
max-width: 60rem;
margin: 0 auto;
font-family: sans-serif;
}
.card > * {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
user-select: none;
}
<!-- language: lang-html -->
<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>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam, excepturi, aut, corporis sapiente molestias magnam nisi rem quo quos exercitationem temporibus repudiandae eveniet neque quidem veniam ipsum beatae? Consequatur, ex.</p>
<!-- end snippet -->
答案2
得分: 0
在 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>
英文:
No need for Codepens here on Stack Overflow. We have snippets!
In this snippet I have made the adjustments to your code to implement the behaviour you are looking for.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论