CSS로 마우스 호버 시 이미지 오버레이 제목 만드는 방법

이미지에 마우스를 올렸을 때(hover) 반투명한 배경과 함께 제목이 부드럽게 나타나는 오버레이 효과는 CSS만으로 간단하게 구현할 수 있습니다. 이 기법은 카드형 UI, 이미지 갤러리, 포트폴리오 사이트 등에서 널리 활용됩니다.

동작 원리

핵심은 세 가지 CSS 속성입니다.

position: relative / absolute — 부모 컨테이너에는 relative를, 오버레이 요소에는 absolute를 지정해 이미지 위에 겹쳐 배치합니다.
opacity — 평소에는 0으로 숨겨 두었다가, 마우스가 올라가면 1로 변경해 나타나게 합니다.
transition — 전환 시간을 지정해 자연스러운 애니메이션 효과를 줍니다.

예제 코드

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
.card-container {
    position: relative;
    width: 50%;
}
.image {
    display: block;
    width: 100%;
    height: auto;
}
.overlay {
    position: absolute;
    bottom: 0;
    background: rgba(48, 9, 155, 0.5);
    width: 78%;
    transition: .5s ease;
    opacity:0;
    color: rgb(251, 255, 0);
    font-size: 25px;
    font-weight: bolder;
    padding: 20px;
    text-align: center;
}
.card-container:hover .overlay {
    opacity: 1;
}
</style>
</head>
<body>
<h2>Image Overlay Title Example</h2>
<div class="card-container">
<img src="https://i.picsum.photos/id/237/536/354.jpg" >
<div class="overlay">Dog</div>
</div>
</body>
</html>

실행 결과

위 코드를 실행하면 처음에는 이미지만 화면에 표시됩니다. 여기서 이미지 위로 마우스를 올리면 하단에서 보라색 계열의 반투명 오버레이가 나타나면서, 노란색 굵은 글씨로 "Dog"라는 캡션이 표시됩니다. 마우스를 이미지 밖으로 치우면 0.5초에 걸쳐 다시 부드럽게 사라집니다.

응용 팁

오버레이의 위치는 bottom 대신 top, left, right 값으로 자유롭게 조정할 수 있으며, width를 100%로 설정하면 이미지 전체를 덮는 오버레이를 만들 수 있습니다. 또한 background의 rgba 알파 값(네 번째 숫자)을 높이면 배경색이 짙어져 오버레이 텍스트의 가독성이 더욱 좋아집니다.