悬停时图像上的颜色叠加

I have this example:

我有这个例子：

https://jsfiddle.net/3q81h1es/

https://jsfiddle.net/3q81h1es/

.image1 {
  display: inline-block;
  height: 300px;
  width: 300px;
  background: url("http://www.avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/images1440/b1.jpg");
  margin-left: auto;
  vertical-align: top;
}
.image1:hover {
  opacity: 0.3;
  filter: alpha(opacity=30);
}

<div class="image1"></div>

I want to make a blue haze effect, like in the picture below:

我想制作蓝雾效果，如下图所示：

Can you help me to solve this problem?

你能帮我解决这个问题吗？

I tried to add .wrap{background:blue;} but not working unfortunately.

我试图添加.wrap {background：blue;}但不幸的是没有工作。

4 个解决方案

#1

Changing block opacity would also change its content, so you might also try changing alpha channel of the overlay using pseudo elements and rgba() background color

更改块不透明度也会更改其内容，因此您也可以尝试使用伪元素和rgba（）背景颜色更改叠加层的Alpha通道

.image1:hover:after {
    background-color: rgba(0, 0, 255, 0.3);
    content: "";
    height: 100%;
    position: absolute;
    width: 100%;
}
.image1 {
    background: url("http://www.avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/images1440/b1.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: inline-block;
    height: 300px;
    margin-left: auto;
    position: relative;
    vertical-align: top;
    width: 300px;
}

<div class="image1"></div>

#2

You can use a blue overlay. This overlay can be made with a pseudo element and displayed on hover:

您可以使用蓝色叠加层。可以使用伪元素进行此叠加并在悬停时显示：

.image1 {
  display: inline-block;
  height: 300px;
  width: 300px;
  background: url("http://www.avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/images1440/b1.jpg");
  margin-left: auto;
  vertical-align: top;
}
.image1:hover:after {
  content:'';
  display:block;
  height:100%;
  background:blue;
  opacity:0.3;
  filter: alpha(opacity=30);
}

<div class="image1"></div>

#3

You could use CSS Blend Modes

您可以使用CSS混合模式

Browser Support is quite good (except for IE)

浏览器支持非常好（IE除外）

FIDDLE

小提琴

.image1 {
  display: inline-block;
  height: 300px;
  width: 300px;
  background: url("http://www.avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/images1440/b1.jpg");
  margin-left: auto;
  vertical-align: top;
}
.image1:hover {
  background-color: rgba(0, 0, 255, .3);
  background-blend-mode: multiply;
}

<div class="image1"></div>

#4

You could use a second additional background using a single color gradient on hover.

您可以在悬停时使用单个颜色渐变来使用第二个附加背景。

.image1 {
  display: inline-block;
  height: 300px;
  width: 300px;
  background: url("http://www.avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/images1440/b1.jpg");
  margin-left: auto;
  vertical-align: top;
}
.image1:hover {
  background: linear-gradient(to bottom, rgba(0, 0, 128, 0.25), rgba(0, 0, 128, 0.25)), url("http://www.avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/images1440/b1.jpg");
}

<div class="image1">


</div>

As an alternative, positioned pseudo-element if the div will have content.

作为替代方案，如果div将具有内容，则定位伪元素。

.image1 {
  display: inline-block;
  height: 300px;
  width: 300px;
  background: url("http://www.avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/images1440/b1.jpg");
  margin-left: auto;
  vertical-align: top;
  color: white;
  position: relative;
  z-index: 1;
}
.image1:hover:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 128, 0.5);
  z-index: -1;
}

<div class="image1">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde magni officia odit enim magnam eaque modi illo dolorum necessitatibus cumque dolore recusandae nisi eos. Libero!</p>
</div>