html - 悬停时颜色叠加在图像上

Question

我有这个例子:

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>

我想做一个蓝色雾霾效果，如下图:

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

我尝试添加 .wrap{background:blue;} 但不幸的是没有成功。

Answer 1

您可以使用蓝色叠加层。可以使用伪元素制作此叠加层并在悬停时显示:

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