每个图像悬停的css颜色叠加

我试图用css覆盖每个图像到红色的背景颜色，但到目前为止我还没有成功和所有封闭的图像叠加。每个图像悬停的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"> 
 
\t <div class="gallery-images"> 
 
\t \t <img src="http://placehold.it/100x100"> 
 
\t \t <div class="gallery-overlay"></div> 
 
\t </div> 
 
\t <div class="gallery-images"> 
 
\t \t <img src="http://placehold.it/100x100"> 
 
\t \t <div class="gallery-overlay"></div> 
 
\t </div> 
 
\t <div class="gallery-images"> 
 
\t \t <img src="http://placehold.it/100x100"> 
 
\t \t <div class="gallery-overlay"></div> 
 
\t </div> 
 
</div>

来源

2016-09-07 Arif Hidayat

检查它现在

.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"> 
 
\t <div class="gallery-images"> 
 
\t \t <img src="http://placehold.it/100x100"> 
 
\t \t <div class="gallery-overlay"></div> 
 
\t </div> 
 
\t <div class="gallery-images"> 
 
\t \t <img src="http://placehold.it/100x100"> 
 
\t \t <div class="gallery-overlay"></div> 
 
\t </div> 
 
\t <div class="gallery-images"> 
 
\t \t <img src="http://placehold.it/100x100"> 
 
\t \t <div class="gallery-overlay"></div> 
 
\t </div> 
 
</div>

来源

2016-09-07 07:46:35 rmarif

是的非常好，谢谢 –

这个答案检查，如果这可以帮助你，并投票它:) – rmarif

.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"> 
 
\t <div class="gallery-images"> 
 
\t \t <img src="http://placehold.it/100x100"> 
 
\t \t <div class="gallery-overlay"></div> 
 
\t </div> 
 
\t <div class="gallery-images"> 
 
\t \t <img src="http://placehold.it/100x100"> 
 
\t \t <div class="gallery-overlay"></div> 
 
\t </div> 
 
\t <div class="gallery-images"> 
 
\t \t <img src="http://placehold.it/100x100"> 
 
\t \t <div class="gallery-overlay"></div> 
 
\t </div> 
 
</div>

来源

2016-09-07 07:53:06

是的，它的工作谢谢 –

每个图像悬停的css颜色叠加

回答

相关问题