CSS-animatie: afbeelding scrollen bij hover

In webdesign kunnen interactieve, aantrekkelijke elementen de gebruikerservaring duidelijk verbeteren. Een leuke manier om dat te doen is een scroll-effect voor een afbeelding bij hover, met CSS-animatie. Met een paar regels code maak je van een statische afbeelding een dynamisch onderdeel dat de aandacht trekt. Laten we kijken hoe je je site tot leven brengt met CSS-beeldscrollen bij hover.

DEMO: beweeg de muis erover om de scroll-animatie te zien

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