每个图像悬停时的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>

Answer 2

立即查看

.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;
}
.gallery-images{position:relative; overflow:hidden; display:inline-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>