CSS 이미지 오버레이 호버 효과란?
이미지 오버레이 호버 효과는 사용자가 이미지 위에 마우스 커서를 올렸을 때(hover) 이미지가 살짝 어두워지면서 그 위에 텍스트 캡션이 나타나는 인터랙션입니다. 이 효과는 별도의 JavaScript 없이 opacity, transition, :hover 가상 클래스만으로도 간단하게 구현할 수 있어, 포트폴리오나 갤러리형 웹사이트에서 널리 활용됩니다.
예제
다음은 CSS만으로 이미지 오버레이 호버 효과를 구현한 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.card-container {
display: inline-block;
position: relative;
width: 50%;
}
img {
opacity: 1;
display: block;
width: 100%;
transition: .5s ease;
backface-visibility: hidden;
}
.hoverText {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 40%;
text-align: center;
}
.card-container:hover img {
opacity: 0.4;
}
.card-container:hover .hoverText {
opacity: 1;
}
.caption {
background-color: rgb(18, 53, 131);
color: white;
font-size: 30px;
padding: 20px;
border-radius: 6px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bolder;
}
</style>
</head>
<body>
<h1>Image Overlay effect Example</h1>
<div class="card-container">
<img src="https://i.picsum.photos/id/237/536/354.jpg">
<div class="hoverText">
<div class="caption">Dog</div>
</div>
</div>
</body>
</html>코드 설명
- .card-container: 이미지와 캡션을 감싸는 컨테이너입니다.
position: relative를 지정해 내부 캡션이 절대 위치(position: absolute)의 기준점으로 삼을 수 있게 합니다. - img:
transition: .5s ease로 0.5초간 부드럽게 변화하는 전환 효과를 적용하고,backface-visibility: hidden으로 전환 중 발생할 수 있는 깜빡임을 방지합니다. - .hoverText: 처음에는
opacity: 0으로 화면에 보이지 않다가, 호버 시 나타나는 캡션 영역입니다.top: 50%,left: 40%값으로 이미지 중앙 근처에 배치했습니다. - :hover: 마우스를 올리면 이미지의 불투명도가 0.4로 낮아지고, 동시에 캡션의 불투명도가 1로 변경되어 텍스트가 자연스럽게 표시됩니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
이미지 위에 마우스 커서를 올리면 아래와 같이 캡션이 나타납니다.
