Question

是否有可能使用CSS在悬停时，div从div的底部滑动到div的50％高，并且我可以拥有文本。到目前为止，我的编码如下：

<div id="cell1">
    <div style="box-shadow: 5px 5px 5px #999; background-color: #CCC; height: 395px;">
        <div align="center">Image Here</div>
    </div> 
    <p></p>
    <div style="box-shadow: 5px 5px 5px #999; background-color: #CCC; height: 395px;">Article2</div>
</div>

Answer 1

您可以通过绝对定位要在父容器中滑入的div，然后将其max-height从零转换为50％来完成此操作。

Demo Fiddle

HTML

<div>
    <div></div>
</div>

CSS

div {
    position:relative; /* important */
    height:200px; /* can be anything */
    width:200px; /* can be anything */
    background:red; /* not important */
}
div div {
    position:absolute; /* important */
    bottom:0; /* important */
    max-height:0; /* important */
    overflow:hidden; /* important */
    background:blue;  /* not important */
    transition:max-height 250ms ease-in; /* important */
}
div:hover div {
    max-height:50%; /* important */
}

动画div从另一个div中的底部滑动

1 个答案:

Demo Fiddle