모든 이미지 호버에 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>

012 지금 확인

출처

2016-09-07 07:53:06

네, 그 덕분에 –

모든 이미지 호버에 CSS 색상 오버레이

답변

관련 문제