html - 动画绝对div

Question

在相对内部有一个绝对 div，我需要那个绝对 div 在容器悬停时跳出。

基本的 html 应该是

<div class="container">
   <div class="animated t50">See more</div>
</div>

CSS

.container {
    position: relative;
    width: 200px;
    height: 200px;
    overflow: hidden;
}
.animated {
    position: absolute;
    bottom: -5%;
}
.t50 {
    transition :0.5s;
    /*and further on with all the prefixes*/
}
.container:hover > .animated {
    bottom: 5%;
}

所以，显然有一些我不知道的东西......

Answer 1

您必须在父容器上设置overflow: visible。

这是一个关于 JS Bin 的例子:http://jsbin.com/luhekatale/1/