图像div类在网格中，需要添加叠加

Question

我用浮动框在网格中设置图像样式。

<style>
.floating-box {
display: inline-block;
width: 22%; 
}
</style>

现在我想添加一个鼠标悬停覆盖，简单的像50％的颜色叠加。但我无法弄清楚如何添加第二个div风格。当我查看here的说明时，我不明白如何组合div样式（我不需要示例的文本部分）。

我已经尝试将两种样式“浮动框”和“叠加”放入工作表中，然后在html中一起使用它们;它不起作用。

<div class="floating-box overlay"><img src="#"></div>

在此先感谢您的帮助。

Answer 1

如果您不需要向叠加层添加文本，则可以使用伪元素创建效果。

div {
  float: left;
  width: 22%;
  position: relative;
}

img {
  max-width: 100%;
  display: block;
}

div:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  background: purple;
  opacity: 0;
  transition: opacity .5s ease;
}

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

<div>
  <img src="https://unsplash.it/400">
</div>
<div>
  <img src="https://unsplash.it/400">
</div>
<div>
  <img src="https://unsplash.it/400">
</div>
<div>
  <img src="https://unsplash.it/400">
</div>
<div>
  <img src="https://unsplash.it/400">
</div>
<div>
  <img src="https://unsplash.it/400">
</div>
<div>
  <img src="https://unsplash.it/400">
</div>