CSS만으로 이미지 오버레이 호버 슬라이드 효과 구현하기

CSS만 활용하면 자바스크립트 없이도 이미지 위에 오버레이가 부드럽게 슬라이드되며 나타나는 호버 효과를 손쉽게 만들 수 있습니다. 마우스를 이미지에 올리면 반투명 컬러 오버레이가 아래에서 위로 확장되면서 캡션이 표시되는 방식입니다.

예제 코드

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.card-container {
    position: relative;
    width: 50%;
}
img {
    display: block;
    width: 100%;
}
.overlay {
    position: absolute;
    bottom: 100%;
    background-color: rgb(55, 74, 179);
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: .5s ease-in-out;
}
.card-container:hover .overlay {
    bottom: 0;
    height: 100%;
}
.caption {
    color: white;
    font-size: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
}
</style>
</head>
<body>
<h1>Image Overlay Slide Example</h1>
<div class="card-container">
<img src="https://i.picsum.photos/id/237/536/354.jpg">
<div class="overlay">
<div class="caption">Dog</div>
</div>
</div>
</body>
</html>

코드 설명

.card-container — position: relative를 지정해 오버레이 요소가 이미지를 기준으로 절대 위치를 가질 수 있도록 합니다.
.overlay — 초기 상태에서는 height: 0으로 숨겨져 있고, bottom: 100% 덕분에 이미지 상단 바깥쪽에 배치됩니다.
transition — .5s ease-in-out을 적용해 높이와 위치 변화가 자연스러운 애니메이션으로 이어집니다.
:hover — 마우스를 올리면 height: 100%과 bottom: 0이 적용되어 오버레이가 아래에서 위로 슬라이드되며 이미지 전체를 덮습니다.
.caption — top: 50%, left: 50% 좌표를 이용해 오버레이 중앙에 흰색 텍스트를 배치합니다.

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

CSS만으로 이미지 오버레이 호버 슬라이드 효과 구현하기

이미지에 마우스를 올리면 다음과 같이 오버레이가 슬라이드되며 나타납니다.

CSS만으로 이미지 오버레이 호버 슬라이드 효과 구현하기