Question

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

我有这个：

<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并添加一些过渡属性以使其平滑。

UPDATED EXAMPLE HERE

.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;
}

Answer 2

-webkit-transition: all 0.4s ease-out;
     -moz-transition: all 0.4s ease-out;
       -o-transition: all 0.4s ease-out;
          transition: all 0.4s ease-out;

将它放在.expanded class

中

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

2 个答案: