在悬停时动画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) */
}

现在这样可行，但我想要一个可视化动画，将title div移动到顶部或底部。困难的部分是，正如我之前提到的，div的大小是可变的。这意味着您无法使用top: 300px和top: 0之类的内容在顶部和底部之间切换。

我该怎么做？甚至可以使用纯CSS吗？如果我使用JQuery，我还需要做什么？

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

这一段从周围的某个地方向上移动，同时到达标题。我不会在这个问题上问如何做到这一点，除非事情荒谬地改变整个事情应该/可以完成的方式。

Answer 1

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

不是给它bottom: 0的初始位置，而是给它top: 80%（100% - 身高.title）。然后在:hover上将其更改为top: 0。

Fiddle

＆＃13;

＆＃13;

.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) */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;