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

Question

我使用浮动框来为网格中的图像设置样式。

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

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

我尝试过两种风格，＆＃34;浮动框＆＃34;和＆＃34;覆盖＆＃34;，进入工作表，然后在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>