CSS transform scale()로 마우스 호버 시 요소 확대 효과 구현하기

별도의 자바스크립트 없이 순수 CSS만으로 요소에 마우스를 올렸을 때 확대되는 효과를 만들 수 있습니다. 핵심은 transform 속성의 변형 메서드인 scale()입니다.

호버 시 요소 확대하기

아래 박스 위에 마우스 커서를 올려보세요.

박스가 원래 크기의 정확히 1.5배, 즉 50% 더 커지는 것을 확인할 수 있습니다. 이것이 바로 CSS만으로 구현한 호버 확대 효과입니다.

CSS transform 속성의 scale() 메서드는 요소의 크기를 늘리거나 줄일 수 있으며, 2D와 3D 환경 모두에서 동작합니다. 이번 예제에서는 간단하게 2D 방식을 사용합니다.

위 예제를 직접 만들어 보려면 HTML 요소 하나와 CSS 규칙 두 개만 필요합니다. 생각보다 훨씬 간단하죠?

HTML 작성하기

먼저 zoom-box라는 클래스를 가진 HTML 요소를 생성합니다.

<div class="zoom-box"></div>

CSS 작성하기

다음으로 스타일시트에 아래 CSS 코드를 추가합니다.

.zoom-box {
  background-color: #CF4B32;
  width: 100px;
  height: 100px;
  margin: 32px auto;
  transition: transform .2s; /* 애니메이션 */
}

.zoom-box:hover {
  transform: scale(1.5);
}

이게 전부입니다! 단 몇 줄의 코드로 부드러운 확대 애니메이션이 완성됩니다.

코드 동작 원리

먼저 zoom-box 클래스를 가진 HTML div 요소를 생성합니다.
그다음 이 클래스에 대한 두 개의 규칙 세트를 만듭니다. 하나는 기본 상태인 .zoom-box, 다른 하나는 마우스가 올라간 동적 상태인 .zoom-box:hover입니다.
첫 번째 규칙 세트에는 크기와 색상 관련 속성(height, width, color)을 지정합니다. margin 속성은 박스를 가운데 정렬하기 위한 것으로, 필수는 아닙니다.
.zoom-box 클래스에서 가장 중요한 부분은 transition 속성입니다. 값으로 transform을 지정하고 지속 시간을 .2s(200밀리초)로 설정했습니다.
두 번째 규칙 세트인 .zoom-box:hover에는 transform 속성을 추가하고 값으로 scale() 메서드를 사용합니다. 여기서 매개변수 1.5는 호버 시 박스가 얼마나 확대될지를 결정하는 값으로, 원본 크기의 150%를 의미합니다.

브라우저 호환성

아래는 벤더 접두사(vendor prefix)를 추가한 코드로, Chrome, Firefox, Safari, Opera 등 주요 브라우저 전체에서 정상적으로 동작합니다.

.zoom-box {
	background-color: #cf4b32;
	width: 100px;
	height: 100px;
	margin: 32px auto;
	-webkit-transition: -webkit-transform 0.2s;
	transition: -webkit-transform 0.2s;
	transition: transform 0.2s;
	transition: transform 0.2s, -webkit-transform 0.2s; /* 애니메이션 */
}

.zoom-box:hover {
	-webkit-transform: scale(1.5);
	        transform: scale(1.5);
}

알아두면 좋은 팁

transition 속성은 .zoom-box 클래스에만 추가했는데도, 박스가 확대될 때와 축소될 때 모두 같은 지속 시간과 타이밍으로 부드럽게 애니메이션되는 것을 noticed 하셨을 겁니다.

그 이유는 transition 속성을 원래 클래스 선택자(.zoom-box)에 선언하면, 해당 클래스에 연결된 모든 선택자에 그 값이 자동으로 적용되기 때문입니다. 여기서 연결된 선택자는 :hover(의사 클래스(pseudo-class)라고도 함)입니다.

반면 transition 속성을 :hover 의사 클래스에만 추가하면 확대될 때만 애니메이션이 적용되고, 축소될 때는 적용되지 않습니다. 마우스가 박스 밖으로 나가는 순간 요소가 지속 시간 0초로 갑자기 줄어들어 눈이 부자연스러워집니다. 대부분의 경우 원하지 않는 결과겠죠.

만약 확대와 축소 상태에 서로 다른 애니메이션 유형이나 지속 시간을 적용하고 싶다면, :hover 의사 클래스 선택자에 별도의 transition 속성을 추가하고 다른 값을 지정하면 됩니다.