如何用CSS在图片上滑动div？ [英] How to slide a div over an image with CSS?

问题描述

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

  opacity：0; 
  

，所以不可见。徘徊时，内部div应显示在我的图片上。我已经实现了这一点，但现在我想通过将叠加div（其显示为不透明度为0.5）逐渐向下滑动到图像上来进一步改进它。我可以用JavaScript在理论上做到这一点，但此时它必须是纯粹的CSS解决方案。到目前为止，我的解决方案只是让覆盖div逐渐出现（淡入），但不会下滑，因为我从来没有在CSS中完成这项工作。

请参阅下图进一步了解：

HTML：

 < div class =img> < img class =squareImgsrc =img1.jpg/>< div class =overlay>推文这< br>购买此< / div>< / div> 
< div class =img> < img class =squareImgsrc =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; 
背景颜色：红色; 
 border：1px纯白色; 
 top：10px; 
 left：10px; 
 opacity：0; 
} .overlay：hover {
 cursor：pointer; 
不透明度：0.5; 
 z-index：1; 
} 
 
 
 .img {
 position：relative; 
 margin-bottom：10px; 
 border：2px纯黄色; 
背景颜色：黑色; 
 width：200px; 
 height：200px; 
剩下：50％; 
 margin-left：-110px; 
 padding：10px; 
} 
  

解决方案

改进：

• 取而代之的是 opacity ，请使用 background：rgba（255,0,0,0.5），以便覆盖层的内容保持不变完全不透明。
  

• transition属性已简化为 transition：all .5s




• 外边框用box-shadow创建，现在使用边界属性（而不是边框​​）创建黑边。




• .overlay 的高度为0，悬停时高度为100％。它与 left：0 和 right：0

>


• 没有设置图片大小，< img> 的大小现在可以控制边框和覆盖的大小，不同的图片尺寸。

class =snippetdata-lang =jsdata-hide =false>

  .img {position：relative;边框：10px纯黑色; box-shadow：0 0 0 2px yellow;显示：inline-block; vertical-align：top;光标：指针; margin：10px;}。overlay {position：absolute; top：0;左：0;正确：0;过渡：全部.5s;溢出：隐藏;身高：0;背景：rgba（255,0,0,0）;}。img：hover .overlay，.overlay：hover {height：100％;背景：rgba（255，0，0，0.5）;}。img> img {display：block; / *防止image下的内联间隙* /}  

 < div class =img> < img src =http://www.placehold.it/200/> < div class =overlay> tweet tweet< br>购买此< / div>< / div>< div class =img> < img src =http://www.placehold.it/300/> < div class =overlay> tweet tweet< br>购买此< / div>< / div> 

On a webpage I am working on, I have a div which contains an image and another div. The inner div is initially set to

opacity: 0;

so that it's not visible. The inner div should appear over my image when hovered. I have achieved this, but now I want to improve upon it further by having the 'overlay' div (which appears with an opacity of 0.5) slide down gradually over the image. I could do it theoretically with JavaScript but on this occasion it must be a pure CSS solution. So far my solution just makes the overlay div appear gradually (it fades in) but does not slide down as I have never done this in CSS alone.

See the image below to understand further:

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

解决方案

Here it is with a slide down thanks to a height transition.

Improvements:

• Instead of opacity, use background: rgba(255,0,0,0.5) so that the contents of the overlay remain fully opaque.

• The transition property has been simplified to transition: all .5s

• The outside border is created with box-shadow and the black border is now created with the border property instead of padding.

• .overlay has a height of 0 and on hover it is given a height of 100%. It is stretched accross the image with the combination of left: 0 and right: 0

• There is no set image size, the size of the <img> now controls the size of the border and overlay, allowing different image sizes.

Complete Example

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

这篇关于如何用CSS在图片上滑动div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！