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

添加班级名称＆＃34; transeffect＆＃34;您可能需要根据需要调整不透明度。删除叠加层是因为您不需要叠加层来使图像变暗。

＆＃13;

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

＆＃13;

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

＆＃13;

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

黑暗的图像问题css

1 个答案: