html - 如何制作从下到上而不是从上到下的过渡幻灯片

Question

所以基本上我得到了这个转变。开始高度为 0，当您悬停 DIV 时，指定高度变为 100px。

除了高度从顶部开始之外，一切都顺利进行。

如何让它从底部开始？这就是我的意思。

http://i.stack.imgur.com/HHBVY.gif

那么如何让它从下往上滑动呢？

这是我为此使用的 css。

.bd-box tr td .bd-name {
    background: rgba(186,0,0,.8);
    width: 100px;
    height: 0;
    text-align: center;
    margin-top: -20px;
    position: absolute;
    opacity: 1;
    transition: .3s ease-in-out;
    overflow:  hidden;
}
.bd-box tr td:hover .bd-name {
    height: 20px;
}

Answer 1

使用定位并向上移动元素而不是改变高度。

div
{
    width: 100px;
    height: 100px;
    position: relative;

    background: black;
    overflow: hidden;
}

div div
{
    background: red;
    position: absolute;
    top: 100px;

    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

div:hover div
{
    top: 80px;
}

JSFiddle