CSS :hover로 이미지 위에 div·span 오버레이 표시하기

마우스를 이미지 위에 올렸을 때 <div> 또는 <span> 요소가 이미지 위에 나타나도록 만드는 것은 CSS의 :hover 선택자와 오버레이(overlay) 기법으로 간단하게 구현할 수 있습니다. 이 기법은 이미지 위에 캡션이나 설명 텍스트를 보여주는 UI에서 널리 사용됩니다.

동작 원리

핵심은 두 가지입니다. 첫째, 부모 요소인 .image에 position: relative를 지정하고 자식 요소인 .overlay에 position: absolute를 적용해 부모를 기준으로 절대 위치시킵니다. 부모에 display: inline-block과 함께 크기를 지정하면 이미지 크기와 관계없이 오버레이가 정확히 덮이게 됩니다.

둘째, .overlay를 기본적으로 화면에서 숨겨둔 뒤, .image:hover .overlay 선택자로 마우스 오버 시점에만 표시되도록 스타일을 변경합니다. HTML 구조상 .overlay가 .image의 하위(descendant) 요소이기 때문에 이 선택자 조합이 정확하게 작동합니다.

HTML 구조

<div class="image">
   <img src="..." />
   <div class="overlay">호버 시 표시될 내용</div>
</div>

CSS 코드

/* 기본 상태 */
.image {
    position: relative;
    display: inline-block;
}
.overlay {
    display: none;
}

/* 마우스 오버 시 오버레이 표시 */
.image:hover .overlay {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    box-sizing: border-box;
}

/* 이미지 정렬 보정 */
.image img {
    vertical-align: top;
}

구현 팁

1. 박스 크기 계산: 예전 코드에서 흔히 보이는 -webkit-box-sizing, -moz-box-sizing 접두사는 구형 브라우저 호환용이며, 현재는 표준 속성인 box-sizing: border-box; 하나만 사용해도 충분합니다.

2. 부드러운 전환 효과: display 속성은 애니메이션이 적용되지 않으므로, 페이드 인 효과를 원한다면 opacity와 transition을 활용하는 것이 좋습니다.

.overlay {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.image:hover .overlay {
    opacity: 1;
}

3. 세로 정렬 문제 방지: img 요소는 기본적으로 inline 요소이므로 아래쪽에 작은 여백이 생길 수 있습니다. vertical-align: top; 또는 display: block;을 지정하면 이 문제를 해결할 수 있습니다.

이처럼 :hover 선택자와 절대 위치 지정만으로 별도의 JavaScript 없이도 이미지 위에 콘텐츠를 표시하는 오버레이 효과를 손쉽게 만들 수 있습니다.