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

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 */
}