每個圖像懸停的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顏色疊加

回答

相關問題