CSS-Animation: Bildscrollen beim Hover

Im Webdesign können interaktive, ansprechende Elemente das Nutzungserlebnis deutlich verbessern. Eine spannende Möglichkeit dafür ist ein Bildscroll-Effekt beim Hover mit CSS-Animation. Mit nur wenigen Codezeilen machst du aus einem statischen Bild ein dynamisches Element, das den Blick anzieht. Lass uns anschauen, wie du deine Website mit CSS-Bildscrollen beim Hover lebendiger machst.

DEMO: Fahre mit der Maus darüber, um die Scroll-Animation zu sehen

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;
}