悬停时动画从下到上移动div答案

【问题标题】：Animate moving div from bottom to top on hover悬停时动画从下到上移动div
【发布时间】：2015-02-09 00:48:02
【问题描述】：

我有一张带有文本覆盖的图片，在一个盒子里。这是一个响应式设计，所以盒子没有固定的尺寸。我想将文本叠加层从顶部移动到底部，但是要使用漂亮的平滑动画来做到这一点。动画必须在悬停时播放。我已经想出了如何做到这一点，但我没有动画。

这大致是 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，我需要做什么？

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

本段从周围的某处向上移动，同时移动到标题。我不是在问如何在这个问题中做到这一点，除非事情可笑地改变了整个事情应该/可以做的方式。

【问题讨论】：

标签： jquery html css animation responsive-design

【解决方案1】：

您可以使用 CSS transition 来做到这一点。

与其给它一个初始位置bottom: 0，不如给它top: 80%（100% - 高度.title）。然后在: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>

【讨论】：