对悬停时从底部到顶部的移动div进行动画处理 [英] Animate moving div from bottom to top on hover

问题描述

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

I have a picture with a text overlay, inside a box. This is a responsive design, so the box does not have fixed dimensions. I want to move the text overlay from the top to the bottom, but with a nice smooth animation that does this. The animation must play on hover. I already figured out how to do this, but I don't have the animation.

这大致就是HTML的样子：

This is roughly what the HTML looks like:

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

And this is the (stripped) 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 之类的东西在顶部和底部之间切换。

Now this works, but I want a visual animation that move the title div to the top, or bottom. The difficult part is that, as I mentioned earlier, the div is variable in size. That means that you can't just use something like top: 300px and top: 0 to switch between top and bottom.

我该怎么做？甚至可以使用纯CSS吗？

How would I do this? Is it even possible using pure CSS? And what would I need to do if I used JQuery?

。

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

Another thing to note is that this is just in development. The final product should also include a paragraph on hover like shown in this picture:

此段从周围后面的某个位置同时向上移动到标题。我不是在问这个问题，除非事情荒唐地改变了整个事情应该/可以完成的方式。

This paragraph moves up from somewhere behind the surrounding, simultaneously to the title. I'm not asking how to do that in this question, unless thing ridiculously changes the way this whole thing should/could be done.

推荐答案

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

You could do this using CSS transition.

而不是将其初始位置设置为底部：0 ，您可以给它 top：80％（ 100％- .title 的高度）。然后在：hover 上将其更改为 top：0 。

Rather than giving it an initial position of bottom: 0, you could give it top: 80% (100% - height of .title). Then on :hover change it to 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>

这篇关于对悬停时从底部到顶部的移动div进行动画处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！