CSS 애니메이션: 호버 시 이미지 스크롤

웹 디자인에서 상호작용이 있고 눈에 띄는 요소를 더하면 방문 경험이 크게 좋아질 수 있습니다. 그중 하나가 CSS 애니메이션으로 만드는 호버 시 이미지 스크롤 효과입니다. 코드 몇 줄이면 가만히 있던 이미지가 시선을 끄는 움직이는 요소가 됩니다. CSS 호버 이미지 스크롤로 사이트에 생기를 더하는 방법을 살펴보겠습니다.

DEMO: 마우스를 올리면 스크롤 애니메이션을 볼 수 있습니다

HTML

<div class="container"> 
	<img src="YOUR-IMAGE"> 
</div>

CSS

img { 
	object-fit: cover;
	object-position: top;
	transition: ease-in-out 4s;
	width: 450px;
	height: 300px;
}
img:hover {
	object-position: bottom;
}