En el diseño web, añadir elementos interactivos y atractivos puede mejorar mucho la experiencia de quien visita tu sitio. Una forma interesante de lograrlo es crear un efecto de desplazamiento de imagen al pasar el ratón con animación CSS. Con unas pocas líneas de código puedes convertir una imagen estática en un componente dinámico que llama la atención. Vamos a ver cómo dar vida a tu web con este desplazamiento de imagen en CSS.
DEMO: pasa el ratón para ver la animación de desplazamiento
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;
}