Animation CSS : défilement d’image au survol

Dans le design web, ajouter des éléments interactifs et attrayants peut nettement améliorer l’expérience de vos visiteurs. Une façon intéressante d’y parvenir est de créer un effet de défilement d’image au survol grâce à une animation CSS. Avec quelques lignes de code, vous transformez une image statique en un composant dynamique qui capte l’attention. Découvrons comment donner vie à votre site avec ce défilement d’image en CSS.

DEMO : survolez pour voir l’animation de défilement

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