fbpx
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email
cómo crear el efecto hover scroll en Elementor con CSS
⏱ Tiempo de lectura: 2 min.

Cómo crear el efecto hover scroll con CSS en Elementor

Para crear efecto hover scroll, antes tenía que instalar un addon que hacia el trabajo, pero tenia un sabor agridulce al final, porque no era exactamente como yo quería o dependia de un plugin más en mi repertorio de WordPress, entonces me puse de objetivo recrearlo desde el CSS personalizado de elementor, con pocas líneas y rápido.

Por eso hoy aprenderemos a crear el efecto hover scroll con una pocas líneas de CSS en Elementor Pro.
Índice de contenido

Cómo crear el efecto hover scroll con CSS en Elementor

Primero, antes de comenzar tenemos que saber que para crear esto necesitaremos tener activado la licencia de Elementor Pro, ya que este nos permite usar la herramienta CSS Personalizado, y sin este no podremos hacer nada.

Una vez aclarado esto, veamos como se ve el efecto:

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. Si aún no sabes cómo cambiar una imagen de fondo de un bloque te dejo acá un tutorial rápido.

Y por último colocaremos un espaciador en la columna para que la imagen se pueda visualizar.

Integración de CSS

Seleccionaremos nuevamente la Sección general y nos iremos a «Avanzado», acá seleccionaremos «CSS Personalizado» y agregaremos el siguiente código:

selector .elementor-column-wrap {
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
transition: all 4s !important;
}

selector .elementor-column-wrap:hover {
background-position: center bottom;
}

Es importante que sepas que la linea 5 «transition: all 4s !important;», 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, 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.

Espero que haya sido de mucha ayuda este tutorial sobre Elementor, si te quedo una duda o tienes alguna pregunta que hacerme, tienes la caja de comentarios para hacerlo, estaré gustoso de responderte.

De cualquier manera, eso seria todo por ahora, muchas gracias por leer y ¡CHAU CHAU!

Si te sirvió, compartelo:

Share on facebook
Share on whatsapp
Share on linkedin
Share on twitter
Share on pinterest
Share on email

11 respuestas

      1. Hola Smith, excelente y resumido tutorial, me sirve pero hace mucho tiempo que estoy investigando la manera de crear un Header con el efecto como el de tu web con CSS y la verdad es que no he dado con el material correcto. ¿Puedes compartir ese efecto? Muchas Gracias

        1. Hola, Julian
          Claro, puedo crear un tutorial de como realizarlo.
          En este caso se usa CSS y JS, pero no es complicado

          Me gustaría saber si estás interesado más en un artículo explicando cómo realizarlo o prefieres un videotutorial mostrando

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Amas elementor tanto como yo?

Suscríbete y demos el siguiente paso para esta relación con Elementor

Este sitio web utiliza cookies para proporcionar una mejor experiencia al usuario. Más información