html - css 颜色叠加在每个图像悬停上

Question

我正在尝试用 css 将每个图像叠加到红色背景颜色，但到目前为止我还没有成功，所有封闭的图像都叠加了。

有什么想法吗？

.gallery-overlay {
    background: rgba(200,30,30,0.5);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
}
.gallery-images:hover .gallery-overlay {
    display: block;
}

<div class="box-recent-gallery">
	<div class="gallery-images">
		<img src="http://placehold.it/100x100">
		<div class="gallery-overlay"></div>
	</div>
	<div class="gallery-images">
		<img src="http://placehold.it/100x100">
		<div class="gallery-overlay"></div>
	</div>
	<div class="gallery-images">
		<img src="http://placehold.it/100x100">
		<div class="gallery-overlay"></div>
	</div>
</div>

Answer 1

.gallery-overlay {
    background: rgba(200,30,30,0.5);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
}
.gallery-images {
  width: 100px;
  height: 100px;
  position:relative;
  float: left;
  margin: 0px 15px;
}
.gallery-images:hover .gallery-overlay {
    display: block;
}

<div class="box-recent-gallery">
	<div class="gallery-images">
		<img src="http://placehold.it/100x100">
		<div class="gallery-overlay"></div>
	</div>
	<div class="gallery-images">
		<img src="http://placehold.it/100x100">
		<div class="gallery-overlay"></div>
	</div>
	<div class="gallery-images">
		<img src="http://placehold.it/100x100">
		<div class="gallery-overlay"></div>
	</div>
</div>