Animazione CSS: scorrimento dell’immagine al passaggio del mouse

Nel web design, aggiungere elementi interattivi e accattivanti può migliorare molto l’esperienza di chi visita il sito. Un modo interessante per farlo è creare uno scorrimento dell’immagine al passaggio del mouse con un’animazione CSS. Con poche righe di codice trasformi un’immagine statica in un componente dinamico che cattura l’attenzione. Vediamo come dare vita al sito con questo scorrimento di immagine in CSS.

DEMO: passa il mouse per vedere l’animazione di scorrimento

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