CSS图像的色调的作品，只有当图像是不可见的（图像覆盖色调？）

Question

这个问题很简单，但我似乎无法找到解决的办法。我有我想成为悬停有色的轮廓图像。正如你可以在摘要中看到，它的工作原理，但只有当图像是不可见的。它是一个局部图像，所以我特意示出的图像是有和没有在那里的一个例子。有什么想法吗？

.box {
  width:100px;
  height:100px;
  border:1px solid grey;
  display: inline-block;
  vertical-align: top;
  margin-top: 10px;;
}

.overlay {
  position: relative;
}

.overlay:after {
  position: absolute;
  content:"";
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity:0;
  background-color: orange;
}

.overlay:hover:after  {
  opacity: .5;
}

<img onclick="sendMessage1()" id="picture1" src="static/images/richie.jpg" class="box overlay">

在这个片段中，网页图像来说明我的意思。

.box {
  width:100px;
  height:100px;
  border:1px solid grey;
  display: inline-block;
  vertical-align: top;
  margin-top: 10px;;
}

.overlay {
  position: relative;
}

.overlay:after {
  position: absolute;
  content:"";
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity:0;
  background-color: orange;
}

.overlay:hover:after  {
  opacity: .5;
}

<img onclick="sendMessage1()" id="picture1" src="https://www.thoughtco.com/thmb/HBaobb2gkXAlGq-a6K56PeyaLOg=/768x0/filters:no_upscale():max_bytes(150000):strip_icc()/clouds-5b6b4e50c9e77c0050491212.jpg" class="box overlay">

Answer 1

你不能使用伪元素来覆盖图像。请将您的伪元素的<img>的容器上。

请参阅本post更多的方式来做到这一点。

.img-container {
  position: relative;
  width: 350px;
  height: 150px;
  border:1px solid grey;
  display: inline-block;
  vertical-align: top;
  margin-top: 10px;;
}

.img-container:after {
  position: absolute;
  content:"";
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity:0;
  background-color: orange;
}

.img-container:hover:after  {
  opacity: .5;
}

<div class="img-container"><img onclick="sendMessage1()" id="picture1" src="https://via.placeholder.com/350x150" class="box overlay"></div>

请参阅本post更多地了解<img>标签和伪元素。