html - 如何在数据库中的图像之上制作 CSS 叠加层

Question

我想要一个具有透明覆盖层的缩略图，因此当用户将鼠标悬停在图像上时，它的中心将有一个“x”字形图标和下面的文字，上面写着“删除照片”。它需要是纯 css3，供用户从他们的页面中删除图像，这是通过数据库完成的。但是，我如何确保它适用于从数据库调用的图像以具有叠加层而不是将图像硬编码到 html 中？

<div class="container">
   <div class="row">
      <div class="col-md-12">
         <img src="img1" data-src="" class="img-responsive">
         <img src="img2" data-src="" class="img-responsive">
      </div>
   </div>
</div>

谢谢。

Answer 1

我可以建议你使用这样的伪元素吗

span {
  position: relative;
  display: inline-block;
}
span:hover:after {
  content: 'X \A' attr(data-text);
  white-space: pre;
  font-size: 24px;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.5);
}

<span data-text="Delete image">
  <img src="http://lorempixel.com/200/100/animals/3" data-src="" class="img-responsive">
</span>