Hoy vamos a ver cómo desplazarse por imágenes largas al pasar el mouse sobre ellas en Elementor, este efecto es muy bueno para las personas que desean crear un portafolio de imágenes muy largas o quieran darle esa experiencia de usuario única. La forma más sencilla para crear efecto hover scroll, antes tenía que instalar un addon que hacia el trabajo, pero no era exactamente como yo quería, entonces me puse a crearlo con un CSS personalizado para elementor, con pocas líneas y rápido.
Configuración de sección
Primero, tenemos que dejar el terreno listo para que todo funcione correctamente, es por eso que crearemos una sección donde ira el efecto.
Nos iremos a “Disposición” y haremos los siguientes ajustes:
- Ancho de contenido: Caja
- Espacio entre columnas: Sin espacio
- Alto: Altura mínima, y lo dejamos según queramos, en mi caso será en 700
- Posición de columna: Estirar
Una vez hecho estos seleccionaremos la columna y nos iremos a “Estilo”, y colocaremos nuestra imagen de fondo que queramos darle el efecto scroll.
Integración de CSS
Seleccionaremos nuevamente la columna y nos iremos a “Avanzado”, y le pondremos nombre CSS por ejemplo «myhover» después seleccionaremos “CSS Personalizado” y agregaremos el siguiente código:
.myhover {
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
transition: all 4s !important;
}
.myhover:hover {
background-position: center bottom !important;
}
La linea “transition: all 4s !important;”, es para que coloques el tiempo que deseas que dure la transición del efecto, de este dependera si el movimiento scroll será lento o rápido.
¡Listo! ya sabes como crear el efecto hover scroll para tu página web.
El Estudio de Manuel Piquer, en aplicación de la normativa vigente en materia de protección de datos de carácter personal, informa que los datos personales que se recogen a través de los formularios de su sitio web, se incluyen en los ficheros automatizados específicos de usuarios de los servicios de la agencia.