CSS에서 마우스 호버 시 전환(Transition) 효과를 추가하는 방법

CSS 호버 전환 효과란?

CSS에서 요소에 :hover 가상 클래스와 transition 속성을 함께 사용하면, 마우스를 올렸을 때 색상 변화나 크기 조절 같은 스타일 변경이 갑작스럽게 일어나지 않고 부드러운 애니메이션으로 자연스럽게 적용됩니다.

transition 속성에 지속 시간(초 단위)을 지정하면 해당 시간 동안 스타일이 점진적으로 변화하며, 이는 버튼, 링크, 카드 등 다양한 UI 요소의 사용자 경험을 향상시키는 데 널리 활용됩니다.

예제 코드

아래 예제는 버튼에 마우스를 올리면(hover) 0.3초 동안 부드럽게 1.5배 확대되는 전환 효과를 구현한 코드입니다.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        padding: 20px;
    }
    .scaleBtn {
        display: inline-block;
        background-color: #0c1377;
        border: none;
        color: white;
        padding: 16px 32px;
        text-align: center;
        font-size: 16px;
        transition: 0.3s;
        margin: 20px;
    }
    .scaleBtn:hover {
        transform: scale(1.5);
    }
</style>
</head>
<body>
<h1>Transition on hover example</h1>
<button class="scaleBtn">Hover Here</button>
</body>
</html>

코드 설명

.scaleBtn 클래스에는 transition: 0.3s;가 적용되어 있어, 모든 스타일 변화가 0.3초에 걸쳐 부드럽게 진행됩니다.
.scaleBtn:hover 선택자는 마우스가 버튼 위에 올라왔을 때 transform: scale(1.5);를 적용하여 버튼을 1.5배 확대합니다.

실행 결과

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

CSS에서 마우스 호버 시 전환(Transition) 효과를 추가하는 방법

버튼에 마우스를 올리면(Hover Here) 아래와 같이 버튼이 부드럽게 확대됩니다.

CSS에서 마우스 호버 시 전환(Transition) 효과를 추가하는 방법

마무리

이처럼 CSS의 transition 속성과 :hover 가상 클래스만으로도 별도의 JavaScript 없이 간단하고 부드러운 인터랙션 효과를 만들 수 있습니다. transition-duration, transition-timing-function 등 세부 속성을 조절하면 더욱 다양한 애니메이션 연출도 가능합니다.