오늘의 짧은 팁에서는 웹 페이지 이미지에 상호작용을 더하는 ‘호버 줌’ 효과를 만들어 봅니다. 아래 CSS를 적용하면 포인터를 올렸을 때 이미지가 부드럽게 확대됩니다. 코드가 거의 없어도 사이트의 시각적 매력을 높이고 방문자의 시선을 끄는 좋은 방법입니다.
DEMO: 호버 줌
HTML
<img class="zoom-in" src="YOUR-IMAGE-PATH"/>
CSS
.zoom-in { transition:transform .2s; }
.zoom-in:hover { transform: scale(1.2); }