CSS :hover로 마우스 오버 시 요소 확대·축소하는 방법

CSS로 마우스 오버 시 요소 확대(Zoom)하기

CSS에서는 :hover 가상 클래스와 transform 속성을 조합하면, 마우스 커서를 요소 위에 올렸을 때 해당 요소를 부드럽게 확대하거나 축소할 수 있습니다.

핵심 원리는 간단합니다. 기본 상태의 요소에 transition 속성으로 애니메이션 효과를 미리 지정해 두고, :hover 상태에서 transform: scale() 값으로 크기를 변경하면 됩니다. 이렇게 하면 갑작스럽게 크기가 변하는 것이 아니라 자연스러운 전환 효과가 적용됩니다.

예제 코드

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    * {
        box-sizing: border-box;
    }
    .zoomDiv {
        padding: 50px;
        background-color: yellow;
        transition: transform 0.2s;
        width: 200px;
        height: 200px;
        margin: 70px;
        border-radius: 50%;
        border: 4px solid rgb(78, 37, 155);
    }
    .zoomDiv:hover {
        transform: scale(1.5);
    }
</style>
</head>
<body>
<h1>마우스 오버 시 확대 예제</h1>
<h2>아래 요소에 마우스를 올려보세요.</h2>
<div class="zoomDiv"></div>
</body>
</html>

코드 설명

transition: transform 0.2s; — 크기 변화가 0.2초 동안 부드럽게 일어나도록 설정합니다. 값을 늘리면 더 천천히, 줄이면 더 빠르게 반응합니다.
.zoomDiv:hover { transform: scale(1.5); } — 마우스를 올리면 요소가 기본 크기의 1.5배로 확대됩니다. 1보다 작은 값(예: scale(0.8))을 사용하면 축소 효과를 낼 수 있습니다.
border-radius: 50%; — 사각형 div를 완전한 원 형태로 만들어 줍니다.

실행 결과

위 코드를 실행하면 노란색 원형 요소가 화면에 나타납니다.

CSS :hover로 마우스 오버 시 요소 확대·축소하는 방법

노란색 원 위에 마우스 커서를 올리면 다음과 같이 요소가 부드럽게 확대됩니다.

CSS :hover로 마우스 오버 시 요소 확대·축소하는 방법

마무리

이처럼 :hover와 transform: scale(), 그리고 transition만 활용해도 별도의 JavaScript 없이 순수 CSS만으로 인터랙티브한 확대·축소 효과를 구현할 수 있습니다. 이미지 갤러리, 버튼, 카드 UI 등 다양한 요소에 응용해 보세요.