小编omu*_*non的帖子

在我正在处理的网页上,我有一个包含图像和另一个div的div.内部div最初设置为

opacity: 0;

所以它不可见.当悬停时,内部div应出现在我的图像上.我已经实现了这一点,但现在我想通过让'overlay'div(出现不透明度为0.5)在图像上逐渐向下滑动来进一步改进.我理论上可以用JavaScript做到这一点,但在这种情况下,它必须是纯CSS解决方案.到目前为止,我的解决方案只是使叠加div逐渐显示(淡入)但不会向下滑动,因为我从未单独使用CSS.

请参阅下图以进一步了解:

HTML:

<div class="img"> <img class="squareImg" src="img1.jpg"/><div class="overlay"> tweet This <br> Buy This</div></div>
    <div class="img"> <img class="squareImg" src="img3.jpg"/></div>
    <div class="img"> </img></div>

CSS

    .overlay{
    position: absolute;
    width: 200px;
    overflow-y: hidden;
    transition-property: all;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    height: 200px;
    background-color: red;
    border: 1px solid white;
    top: 10px;
    left: 10px;
    opacity: 0;
} .overlay:hover{
    cursor:pointer;
    opacity: 0.5;
    z-index: 1;
}


.img{
position: relative;
margin-bottom: 10px;
border: 2px solid yellow;
background-color: black;
width: 200px;
height: 200px;
left: …