html - 使用 CSS 过渡来更改元素位置

Question

我想更改悬停时 div 的位置，我可以使用以下代码来实现。当我将鼠标悬停在 .box 上的任意位置时，.info 的位置会从下到上更改。

我想用过渡效果改变它的位置，让它看起来像是向上移动，而不是快速向上出现。仅使用 CSS 可以完成吗？

我正在尝试使用转换属性，但无法使其工作。这是我的代码:

HTML:

<div class="box">
    <div class="img"><img src="http://i.imgur.com/SGw04SV.jpg" /></div>
    <div class="info">
        <div class="title">Hello world</div>
        <div class="more">more stuff</div>
    </div>    
</div>

CSS:

.box{
    width: 400px;
    height: 400px;
    overflow: hidden;
    position: relative;
    -moz-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
}

.info{
    position: absolute;
    bottom: 0;
    
}

.box:hover .info{
    top: 0;
}

演示: https://jsfiddle.net/fXXsS/

Answer 1

here是一个可能的答案

HTML:

    <div class="box">
        <img src="http://i.imgur.com/SGw04SV.jpg"/>
        <div class="info">
            <div class="title">Hello world</div>
            <div class="more">more stuff</div>
        </div>
    </div>

CSS:

    .box {
      position: relative;
    }
    .box img {
      width: 400px;
      height: 400px;
      overflow: hidden;
    }
    .info {
      position: absolute;
      top: 0;
      margin-top: 400px;
    }
    
    .box:hover .info {
      margin-top: 0;
      -moz-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out;
    }