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

如果无法设置初始值，则只需使用transfrom。您也可以删除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%);
}

<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>

当另一个div悬停在上面时，使div向上滑动

1 个答案: