웹 페이지에서 이미지에 마우스를 올리면 아이콘이나 캡션이 부드럽게 나타나는 오버레이 효과는 사용자 경험을 한층 끌어올리는 대표적인 UI 기법입니다. 이 효과는 JavaScript 없이 CSS만으로도 간단하게 구현할 수 있으며, 핵심은 :hover 선택자와 opacity, transition 속성의 조합입니다.
동작 원리
오버레이 효과는 크게 세 가지 요소로 구성됩니다.
1. 컨테이너(position: relative) — 이미지를 감싸는 부모 요소에 position: relative를 지정하여 오버레이 레이어가 이미지 위에 정확히 위치할 수 있는 기준점을 만듭니다.
2. 오버레이 레이어(position: absolute) — 컨테이너 전체를 덮는 절대 위치 요소로, 처음에는 opacity: 0으로 숨겨둡니다.
3. 호버 상태(:hover) — 마우스가 올라가면 opacity: 1로 전환되어 아이콘이 서서히 나타납니다. transition 속성이 이 변화를 부드럽게 연결해 줍니다.
전체 예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
* {
box-sizing: border-box;
}
.card-container {
display: inline-block;
position: relative;
width: 50%;
}
img {
opacity: 1;
display: block;
width: 100%;
transition: .5s ease;
backface-visibility: hidden;
}
.hoverText {
position: absolute;
top: 0;
height: 100%;
transition: .5s ease;
opacity: 0;
width: 100%;
text-align: center;
}
.card-container:hover .hoverText {
opacity: 1;
}
.caption {
background-color: rgb(18, 53, 131);
color: white;
font-size: 30px;
padding-top: 30%;
border-radius: 6px;
height: 100%;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bolder;
}
</style>
</head>
<body>
<h1>Image Overlay Icon Example</h1>
<div class="card-container">
<img src="https://i.picsum.photos/id/237/536/354.jpg">
<div class="hoverText">
<div class="caption">
<i style="font-size:150px" class="fa fa-paw" aria-hidden="true"></i>
</div>
</div>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
이미지에 마우스를 올리면 반투명 배경과 함께 발바닥 아이콘이 나타납니다.
주요 CSS 속성 설명
backface-visibility: hidden — 이미지 뒷면이 보이지 않도록 하여 전환 애니메이션이 더욱 깔끔하게 처리됩니다.
transition: .5s ease — 0.5초 동안 완만한 가속 곡선으로 변화가 일어나 자연스러운 페이드 인·아웃 효과를 만듭니다.
.card-container:hover .hoverText — 후손 선택자를 활용해 컨테이너에 마우스가 올라갔을 때 내부 오버레이의 투명도를 변경합니다.
응용 팁
아이콘 대신 텍스트 캡션을 넣거나, transform: scale()을 함께 사용하면 확대되는 듯한 동적 효과를 추가할 수 있습니다. 또한 Font Awesome 대신 SVG 아이콘이나 이모지를 활용해도 같은 방식으로 적용 가능합니다.