Animação CSS: deslocamento de imagem ao passar o rato

No design web, adicionar elementos interativos e apelativos pode melhorar bastante a experiência de quem visita o seu site. Uma forma interessante de o fazer é criar um efeito de deslocamento de imagem ao passar o rato com animação CSS. Com poucas linhas de código, transforma uma imagem estática num componente dinâmico que chama a atenção. Vamos ver como dar vida ao site com este deslocamento de imagem em CSS.

DEMO: passe o rato para ver a animação de deslocamento

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