对悬停时从底部到顶部的移动div进行动画处理

Question

我有一个在框内带有文字覆盖的图片。这是一种响应式设计，因此包装盒没有固定尺寸。我想将文本叠加层从顶部移动到底部，但是要用一个很好的平滑动画来做到这一点。动画必须悬停播放。我已经想出了如何做到这一点，但是我没有动画。

HTML大致如下所示：

<div class="box">
    <div class="box_content">
        <img class="inner_img" src="http://placehold.it/1000x1000" />
        <div class="title">The Title</div>
    </div>
</div>

这是（剥离的）CSS：

.box {
    position: relative;
}

.box_content {
    position: absolute;
    top: 0;
    left: 0;
}

.title {
    position: absolute;
    bottom: 0;            /* This moves it to the bottom (initial state) */
    width: 100%;
    height: 20%;
    background: rgb(148, 193, 31);
    background: rgba(148, 193, 31, 0.5);
}

.box:hover .title {
    top: 0;            /* This moves it to the top (only on hover) */
}

现在可以使用，但是我想要一个视觉动画，将titlediv 移动到顶部或底部。困难的部分是，正如我之前提到的，div的大小是可变的。这意味着您不能只使用top: 300px和top: 0来在顶部和底部之间切换。

我该怎么做？甚至可以使用纯CSS吗？如果我使用JQuery，该怎么办？

。

要注意的另一件事是，这只是在开发中。最终产品还应在悬停时包含一个段落，如下图所示：

本段从周围后面的某个位置移至标题。我没有问这个问题该怎么做，除非事情荒谬地改变了整个事情应该/应该完成的方式。

Answer 1

您可以使用CSS进行此操作transition。

除了给它一个初始位置bottom: 0，您可以给它一个top: 80%（100%-height of .title）。然后:hover将其更改为top: 0。

小提琴

.box {
  position: relative;
}
.box_content {
  position: absolute;
  top: 0;
  left: 0;
}
.title {
  position: absolute;
  top: 80%;
  /* This moves it to the bottom (initial state) */
  width: 100%;
  height: 20%;
  background: rgb(148, 193, 31);
  background: rgba(148, 193, 31, 0.5);
  -webkit-transition: top 1s;
  transition: top 1s;
}
.box:hover .title {
  top: 0;
  /* This moves it to the top (only on hover) */
}

<div class="box">
  <div class="box_content">
    <img class="inner_img" src="http://placehold.it/1000x1000" />
    <div class="title">The Title</div>
  </div>
</div>