html - 变暗的图像问题CSS

Question

我正在尝试获取图像并将其变暗，然后在鼠标悬停在图像上时图像展开，到目前为止，这是我拥有的 Css 和 html:

.module {
width:400px;
height:300px;
position:static;
overflow:none;
display:table-cell;
}

.module:hover {
-ms-transition:all 3s ease;
transition:all 3s ease;
-ms-transform:scale(1.05);
transform:scale(1.05);
}

.overlay {
  position: absolute;
  bottom: 0%;
  left: 0%;
  right: 0%;
  overflow: hidden;
  width: 100%;
  height: 100%;
  transition: 3s ease;
}

.module .overlay{
  height: 100%;
  background: 
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 1)
    );
}


.text {
  white-space: nowrap; 
  color: white;
  font-size: 30px;
  position: absolute;
  overflow: hidden;
  top: 95%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);

}

<div class="module" unselectable="on">
                  <a href="http://www.bbc.co.uk/news" target="_blank" unselectable="on"><img src="https://uelac.sharepoint.com/:i:/r/ITServices/PublishingImages/_DSC6407_jpg.jpg?csf=1&amp;e=QO7pRx" alt="test" unselectable="on"> </a>
                    <div class="overlay" unselectable="on">
    <div class="text" unselectable="on">Digital Training Services</div>
    </div>
</div>

除了让图像永久变暗之外，我所有的部分都在工作，正如在全屏运行代码片段时所看到的(一个小警告它可能会闪烁很多)它可能是位置变量之一，但我已经尝试过所有这些，它似乎并没有达到我想要的程度。谢谢。

Answer 1

添加类名“transeffect”，您可能需要根据需要调整不透明度。移除叠加层，因为您实际上不需要叠加层来使图像变暗。

.module {
width: 100%;
  height: 100%;
position:relative;
overflow:none;
display:table-cell;
}

.module:hover {
-ms-transition:all 3s ease;
transition:all 3s ease;
-ms-transform:scale(1.05);
transform:scale(1.05);
}

.overlay {
  position: absolute;
  bottom: 0%;
  left: 0%;
  right: 0%;
  overflow: hidden;
  width: 100%;
  height: 100%;
  transition: 3s ease;
}




.text {
  white-space: nowrap; 
  color: white;
  font-size: 30px;
  position: absolute;
  overflow: hidden;
  top: 95%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);

}

img {
    max-width: 100%;
    max-height: 100%;
}

img.transeffect:hover {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

<div class="module" unselectable="on">
                  <a href="http://www.bbc.co.uk/news" target="_blank" unselectable="on"><img src="https://images.pexels.com/photos/126407/pexels-photo-126407.jpeg?auto=compress&cs=tinysrgb&h=350" alt="test" unselectable="on" class="transeffect"> </a>
                    <div class="" unselectable="on">
    <div class="text" unselectable="on">Digital Training Services</div>
    </div>
</div>

https://jsfiddle.net/ayang10/4mj66wqs/