CSS만으로 마우스 오버 시 이미지 오버레이 줌(확대) 효과 구현하는 방법

웹 페이지에서 이미지에 마우스를 올렸을 때 오버레이가 부드럽게 확대되며 화면을 덮는 줌 효과는 자바스크립트 없이 CSS만으로도 손쉽게 구현할 수 있습니다. 핵심은 :hover 가상 클래스와 transform, transition 속성의 조합입니다.

예제

다음은 마우스 오버 시 이미지 오버레이 줌 효과를 만드는 전체 코드입니다.

<!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;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgb(55, 74, 179);
    overflow: hidden;
    width: 100%;
    height: 0;
    transform:scale(0);
    transition: .5s ease-in-out;
}
.card-container:hover .overlay {
    height: 100%;
    transform: scale(1);
}
.caption {
    color: white;
    font-size: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
}
</style>
</head>
<body>
<h1>Image Overlay Zoom 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>

실행 결과

위 코드를 브라우저에서 실행하면 다음과 같은 화면이 출력됩니다.

CSS만으로 마우스 오버 시 이미지 오버레이 줌(확대) 효과 구현하는 방법

이미지 위로 마우스 커서를 올리면 파란색 오버레이가 0.5초 동안 부드럽게 확대되면서 전체 이미지를 덮고, 중앙에 캡션 텍스트가 나타납니다.

CSS만으로 마우스 오버 시 이미지 오버레이 줌(확대) 효과 구현하는 방법

코드 동작 원리

.card-container — position: relative를 설정해 오버레이가 이미지 영역 안에 절대 위치로 배치될 수 있는 기준점을 제공합니다.
.overlay — 초기 상태에서 height: 0과 transform: scale(0)으로 설정되어 화면에 보이지 않으며, transition: .5s ease-in-out 덕분에 크기 변화가 부드럽게 애니메이션 처리됩니다.
.card-container:hover .overlay — 마우스 오버 시 height가 100%로, scale이 1로 변경되어 오버레이가 전체 이미지를 꽉 채우며 나타납니다.
.caption — top: 50%, left: 50% 값을 사용해 흰색 캡션 텍스트를 오버레이의 중앙에 배치합니다.

이처럼 :hover와 transition만 활용하면 별도의 스크립트 없이도 인터랙티브한 이미지 오버레이 효과를 간단히 완성할 수 있습니다.