当另一个div悬停时，让div向上滑动

Question

我有一个名为case-card的块，它由一个名为case-card__wrapper的子div组成，它包含文本。

在case-card悬停，我希望case-card__wrapper稍微向上移动。不是一个行动，而是过渡。

我觉得我有一般的想法，但不确定如何让过渡工作？目前，它只是从一个点到另一个点：

.case-card {
    height: 560px;
    width:600px;
    color: #ededed;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    transform: translateY(20px);
    transition: all .3s ease-in-out;
    background-color: #333; 
    overflow: hidden;
}
.case-card__wrapper{
    position: absolute;
    transition: 0.5s;
    /*top: 0; Don't want to add this because I want the text to be centered in the div and rather not define a number since the div heights may vary  */
}
.case-card__title{
  font-size: 16px;
}
.case-card:hover .case-card__wrapper {
  top: 150px;
}

<div class="case-card">
  <div class="case-card__wrapper">
    <h4 class="case-card__title">Title</h4>
    <p class="case-card__subtitle">Subtitle</p>
  </div>
</div>

我试图通过CSS来做到这一点。有任何想法吗？

Answer 1

如果无法设置初始值，只需使用transform。你也可以删掉qazxsw poi

position:absolute

.case-card {
    height: 560px;
    width:600px;
    color: #ededed;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    transform: translateY(20px);
    transition: all .3s ease-in-out;
    background-color: #333; 
    overflow: hidden;
}
.case-card__wrapper{
    transition: 0.5s;
 }
.case-card__title{
  font-size: 16px;
}
.case-card:hover .case-card__wrapper {
  transform:translateY(-100%);
}