Question

我正在建立一个网站，其中有一个图像，当它悬停时，它有一个颜色叠加。但是，不是那种颜色覆盖，它变成白色，网站的背景。

以下是代码：

<div class="col-md-6 col-sm-12">
<img src="images/about-img-2.jpg" class="img-responsive overlay" alt="about img 2">
</div>

和css：

.overlay:hover {
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.23);
}

It goes from this

To this when hovered

对不起，我无法嵌入我不允许的图像。

Answer 1

目前，您正在使用opacity: 0隐藏图片本身。你想要的是在图像上叠加一个伪元素，如下所示：

＆＃13;

.overlay {
  position: relative;
  display: inline-block;
  background: cyan;
  display: inline-block;
}

.overlay > img {
  vertical-align: middle;
}

.overlay::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  transition: .5s ease;
}

.overlay:hover::before {
  opacity: 0.23;
}

＆＃13;

<div class="col-md-6 col-sm-12">
  <span class="overlay">
    <img src="http://via.placeholder.com/350x150" class="img-responsive" alt="about img 2">
  </span>
</div>

＆＃13;

当图像可见时，仅更改图像的背景颜色不起作用。因此，要实现真正的叠加，我们需要实际创建一个叠加在该图像上的元素。

Answer 2

opacity: 0;使其完全透明（即不可见） - 因此您可以看到网站的白色背景。只需从hover状态的CSS（而不是从初始CSS）中删除它

Answer 3

试试这个，

goog.provide

.container {
  position: relative;
  width: 50%;
}

.img {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #fff;
}

.container:hover .overlay {
  opacity: 0.7;
}

Answer 4

您可以更改＆＃39;不透明度＆＃39;根据你的项目你想要多少模糊。这是您的示例的工作副本。您可以在文本上看到悬停效果。（关于img2）

＆＃13;

.overlay:hover {
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0.2;
transition: .5s ease;
background-color: rgba(0,0,0,0.23);
}

＆＃13;

<div class="col-md-6 col-sm-12">
<img src="images/about-img-2.jpg" class="img-responsive overlay" alt="about img 2">
</div>

＆＃13;

图像悬停颜色叠加

4 个答案: