【发布时间】：2021-02-05 07:22:51
【问题描述】：
我试图让每个单独的框在悬停时向上滑动内容，但我无法弄清楚悬停部分如何增加高度。因此，如果框是 350px x 350px 并且您将鼠标悬停在它上面，它的高度会增加到 650px x 350px 以允许标题、文本和按钮。我试图根据 :hover 增加高度，但 tha obv 没有用。
我应该为此使用 flex 吗？ 我可以用 CSS 完成这个吗？ 我可以在悬停时使用过渡高度吗？
有没有人有什么建议，因为我很难过。
这是我的代码：
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");
* {
box-sizing: border-box;
}
body {
font-family: Montserrat, sans-serif;
margin: 0;
padding: 3rem;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, 17rem);
gap: 2rem;
}
.item {
position: relative;
height: 19rem;
background-color: lightGrey;
overflow-y: hidden;
box-shadow: 0.1rem 0.1rem 1rem rgba(0, 0, 0, 0.1);
}
.item h3 {
margin: 0;
display: block;
background-color: turquoise;
padding: 1rem;
}
.item a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.item a:hover ~ .item__overlay, .item a:focus ~ .item__overlay {
transform: translate3d(0, 0, 0);
}
img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.item__overlay {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
position: absolute;
width: 100%;
top: 0;
transition: transform 300ms;
background-color: #82ebe0;
transform: translate3d(0, calc(100% - 3.5rem), 0);
}
.item__body {
flex-grow: 1;
padding: 1rem;
}
.item__body p {
margin: 0;
}<div class="grid">
<div class="item">
<a href="#0" aria-labelledby="person1"></a>
<img src='https://images.unsplash.com/photo-1590424744257-fdb03ed78ae0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<div class="item__overlay">
<h3 id="person1" aria-hidden="true">Person 1</h3>
<div class="item__body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="item">
<a href="#0" aria-labelledby="person2"></a>
<img src='https://images.unsplash.com/photo-1590424744257-fdb03ed78ae0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<div class="item__overlay">
<h3 id="person2" aria-hidden="true">Person 2</h3>
<div class="item__body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="item">
<a href="#0" aria-labelledby="person3"></a>
<img src='https://images.unsplash.com/photo-1590424744257-fdb03ed78ae0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<div class="item__overlay">
<h3 id="person3" aria-hidden="true">Person 3</h3>
<div class="item__body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="item">
<a href="#0" aria-labelledby="person4"></a>
<img src='https://images.unsplash.com/photo-1590424744257-fdb03ed78ae0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<div class="item__overlay">
<h3 id="person4" aria-hidden="true">Person 4</h3>
<div class="item__body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>【问题讨论】：
-
您的代码有什么问题？悬停似乎工作正常
-
我需要它在悬停时缩放高度。
-
我需要它来缩放高度以便在悬停时添加更多文本。
-
这就是你的代码实际在做的事情
-
不，如果我在第一个框中添加更多文本，它会切断它。