jquery - 悬停时从底部到顶部动画移动 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% - 高度.标题)。然后在 :hover 上将其更改为 top: 0。

Fiddle

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