在悬停在照片上时转换叠加层的最简单方法是什么？

Question

我在这里寻找css魔法.我希望用户将鼠标悬停在已有文本的框上.然后我需要黑盒从下面升起并坐在文本后面.

我的JS FIDDLE在这里!

我有这个:

<div class="box expanded">
Some text
</div>

我的CSS:

.expanded  {
height: 179px;
font-size: 20px;
padding-top: 130px;
position: relative;
z-index: 1000;
background-color: red;
transition: transform 0.4s;
}

.expanded:after  {
content: '';
position: absolute;
height: 80px;
width: 100%;
bottom: 0;
left: 0;
z-index: -999;
background-color: #000;
transform: translateY(0%);
    transition: transform 0.4s, opacity 0.1s 0.3s;
}

Answer 1

添加overflow:hidden到父级,.box然后将伪元素的初始位置设置为top:100%.在:hover伪元素上,将其转换为top:0并添加一些过渡属性以使其平滑.

这里有更新的例子

.box {
    overflow:hidden;
}
.expanded:after {
    content:'';
    position: absolute;
    height: 80px;
    width: 100%;
    top:100%;
    left:0;
    z-index: -999;
    background-color: #000;
    transition: all 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
}
.expanded:hover:after {
    top:0;
}