如何用CSS在图像上滑动div？

Question

在我正在处理的网页上,我有一个包含图像和另一个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: 50%;
margin-left: -110px;
padding: 10px;
}

Answer 1

由于高度过渡,这是滑下来.

改进:

• 而不是opacity使用background: rgba(255,0,0,0.5),以使覆盖的内容保持完全不透明.

• 过渡属性已简化为 transition: all .5s

• 外部边框使用box-shadow创建,现在使用border属性而不是padding创建黑色边框.

• .overlay高度为0,悬停时高度为100%.它被拉伸翻过图像用的组合left: 0和right: 0

• 没有设置图像大小,<img>现在的大小控制边框和叠加的大小,允许不同的图像大小.

完整的例子

.img {
  position: relative;
  border: 10px solid black;
  box-shadow: 0 0 0 2px yellow;
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
  margin: 10px;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transition: all .5s;
  overflow: hidden;
  height: 0;
  background: rgba(255, 0, 0, 0);
}
.img:hover .overlay,
.overlay:hover {
  height: 100%;
  background: rgba(255, 0, 0, 0.5);
}
.img > img {
  display: block;/* Prevent inline gap under image*/
}

<div class="img">
  <img src="http://www.placehold.it/200" />
  <div class="overlay">tweet This <br>Buy This</div>
</div>

<div class="img">
  <img src="http://www.placehold.it/300" />
  <div class="overlay">tweet This <br>Buy This</div>
</div>

Answer 2

如果需要向下滑动，应该使用@keyframes：

.overlay:hover{
-webkit-animation: slide 5s; /* Chrome, Safari, Opera */ 
animation: slide 5s;
}
@keyframes slide {
    from {height: 0px;}
    to {height: 200px;}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes slide {
    from {height: 0px;}
    to {height: 200px;}
}