Question

我正在尝试创建一个覆盖整个div /卡的叠加层。我有三张卡片，我想在活动时翻转黑色。出于某种原因，我无法选择整个div。

HTML：

  <div class="item "> 
  <div class="overlay">
  <img src="http://placehold.it/600x350">
  <h2>Title</h2>
  <p> Text</p>
  </div><div class="overlay"> </div> 
  </div>

和CSS：

 .item {

    padding: 0px 0;
  margin: 1%;
    border-radius: 2px;
  flex: 1 250px;
  height: auto;
  text-align: center;
  background: linear-gradient(0deg, #efefef, #ffffff);
}

.overlay {
  position: relative;
   background-color: rgba(0,0,0,0)
   -webkit-transition: opacity 1s ease-in-out;
   -moz-transition: opacity 1s ease-in-out;
   -o-transition: opacity 1s ease-in-out;
   transition: opacity 1s ease-in-out;
}


.overlay:hover {
  opacity: 1;
  background-color: rgba(0,0,0,1);

}

CODEPEN EXAMPLE

Answer 1

div.item具有一定的大小和形状。将其设置为relative，以便下一步工作

制作div.overlay position:absolute - 它将覆盖它，但它没有大小，因此它仍然是不可见的。

然后，将div.overlay设为其父级（div.item）的完整高度。

当显示时（at：hover），它将是.item的100％高度/宽度，并将覆盖它。

＆＃13;

body {background-color: #C70025;}

img {width: 100%;}

#container {width:90%;margin:0 auto;display:flex;flex-wrap:wrap;
justify-content:space-between;}

.item {color:#000;padding:0px 0;margin:1%;border-radius:2px;flex:1 250px;height:auto;text-align:center;background:linear-gradient(0deg, #efefef, #ffffff);}

.item{position:relative;}
.overlay {
  position:absolute;
  top:0;left:0;right:0;bottom:0;
   background-color: rgba(0,0,0,0)
   -webkit-transition: opacity 1s ease-in-out;
   -moz-transition: opacity 1s ease-in-out;
   -o-transition: opacity 1s ease-in-out;
   transition: opacity 1s ease-in-out;
}
.overlay:hover {
  opacity: 1;
  background-color: rgba(0,0,0,1);

}

＆＃13;

<div id="container">
   <div class="item "> 
      <img src="http://placehold.it/600x350">
      <h2>Title</h2>
      <p> Text</p>
      <div class="overlay"> </div> 
   </div>
   <div class="item">
      <img src="http://placehold.it/600x350">
      <h2> Title </h2>
      <p>Text</p>
      <div class="overlay"> </div> 
   </div>
   <div class="item">
      <img src="http://placehold.it/600x350">
      <h2> Title </h2>
      <p>Text</p>
      <div class="overlay"> </div> 
   </div>
</div>

＆＃13;

CSS卡覆盖图像和文本

1 个答案: