fbpx
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email
Cómo crear el efecto hover en elementor
⏱ Tiempo de lectura: 6 min.

Cómo crear el efecto hover en Elementor para cautivar a tus visitantes

Hace aproximadamente dos años Elementor añadió el maravilloso efecto Hover, que te permite crear increíbles efectos a casi cualquier cosa al pasar el mouse encima del elemento.

Este efecto hará que tu página se vuelva dinámica, lo que mejorara la experiencia de usuario al entrar en ella ¿Es lo que muchos deseamos no? además, es uno de los efectos más usados a la hora de crear una página web atractiva.

Por eso hoy te explicare cómo crear el efecto hover para hacer más atractivo tu página web y algunos trucos.
Índice de contenido

Cómo activar los efectos Hover

Para hacer el famoso efecto hover es fácil, solo tenemos que seleccionar el elementor que queremos que tenga el efecto y nos vamos a «Estilo» y buscamos los siguientes cuadros:

Gráfico de ubicación del efecto hover dentro del plugin Elementor.

Una vez ahí, veremos que hay 2 cuadros, el NORMAL y ENCIMA (HOVER).

  • Normal: Es lo que normalmente tu imagen muestra al cargar tu página, lo que siempre vemos y esta configuración será cuando el cursor no este dentro de nuestro objeto.
  • Encima (Hover): Acá es donde ocurrirá la magia, en este cuadro nosotros configuraremos todo lo deseemos mostrar cuando el cursor pase por encima de nuestro objeto. 
También es posible crear este efecto en el área de «Avanzado», sin la necesidad de estar en «Estilo».

Tipos de efectos Hover:

Existen diferentes tipos de efectos, como:

    • Cambiar color de fondo de un bloque

    • Cambiar imagen de fondo de un bloque

    • Superposición de colores

    • Animación de imagen o botón

    • Efecto de sombra

    • Efectos sobre el radio de un borde

Estos algunos tipos de efectos disponibles que te mostrare, estoy seguro de que habrá más estilos, te invito a la caja de comentarios a que me lo hagas saber para así ir mejorando y aprendiendo con ustedes.
Listo, ahora pasemos a la práctica y veamos los efectos y como crearlos.

Cambiar color de fondo de un bloque

Este es el más básico, pero es muy atractivo y minimalista. 

El bloque de fondo más hermoso del mundo✨

Para realizarlo seleccionaremos la sección o columna que queremos que tenga el efecto hover y nos iremos al apartado «Estilos», ahora nos iremos a «Fondo» y por defecto estará seleccionado el apartado «NORMAL», lo dejaremos ahí, y en Tipo de fondo marcaremos el pincel, que es el tipo de fondo «Clásico», le colocarás el color que más te guste, en mi caso escogí el amarillo. 

Ahora nos iremos a «ENCIMA», y haremos el mismo proceso del paso anterior. Para ver el efecto, sitúa el cursor encima de tu bloque y veras el efecto.

Gráfico del paso de cómo hacer el efecto hover dentro de Elementor.

Por último, escogeremos cuanto tiempo queremos que duré la transición entre los colores, en mi caso escogí 1 segundo, porque me agrada que el efecto se disfrute, escoge el tiempo que más te guste y disfrutalo.

Gráfico de la duración de la transicion de un efecto hover en Elementor.

¡Felicidades, ya tienes tu primer efecto Hover!

Cambiar imagen de fondo de un bloque

Usando este efecto, creamos una animación interactiva con el usuario, destacando la imagen y a muy ligero peso.

Atardecer hermoso 🎇

Para crear este bello efecto haremos el mismo proceso del efecto anterior, seleccionaremos la sección o columna que queremos que tenga el efecto y nos iremos al apartado «Estilos», ahora nos iremos a «Fondo» y por defecto estará seleccionado el apartado «NORMAL», lo dejaremos ahí, y en Tipo de fondo marcaremos esta vez «Imagen» y escogeremos la imagen.

Gráfico de la ubicación para crear el efecto hover con una imagen en Elementor.
Recuerda configurar bien la Posición, el Tamaño y el Repetir correctamente.

Ahora nos iremos a «ENCIMA», y haremos el mismo proceso del paso anterior, puedes dejar en «Por defecto» la configuración de la imagen, ya que así heredará la configuración de la imagen anterior.

También puedes jugar con la configuración para que le des un efecto más personalizado, tu imaginación es tu limite.

Gráfico de la ubicación de ENCIMA para crear el efecto hover con una imagen en Elementor.

Por último, al igual que en el proceso anterior escogeremos cuanto tiempo queremos que dure la transición de una imagen a otra, en este escogí 1.5 segundos.

Según el tipo de animación que quieras darle al bloque dependerá de los valores, así que te invito a que juegues con los valores, siempre digo que esto es prueba y error, así que no le tengas miedo a equivocarte.

Superposición de colores

Este efecto te servirá mucho a la hora de crear bloques donde tendrán una imagen de fondo y delante de ella habrá un texto, así crearás el contraste correcto para que tu visitante pueda leer claramente cuando ponga el cursor encima de lo que le interesa.

El efecto hover de superposición de un color

Para crear este efecto haremos el mismo proceso del efecto anterior, en este ejemplo junte ambos efectos, el de un color de fondo y una imagen sin fondo (PNG) y le di un aspecto muy dinamico.

Gráfico de editor de herramientos de elementor para crear un hover de superposición.

Ahora en vez de ir al apartado «ENCIMA» nos iremos a la sección «Capa de Fondo», para seguir con el apartado «ENCIMA» y le colocaremos un fondo negro o del color que les agrade.

En las configuraciones colocaremos una «Opacidad» de 0.35 y una «Duración de la transición» de 0.5 segundos.

Gráfico de configuración de colocar una capa de fondo en Elementor.

Este efecto es muy usado en Landing pages o portadas donde quieren destacar un objeto o texto, para invitar al usuario a hacer clic.

Puedes jugar de muchas maneras, en mi caso, yo trabaje una sección con dos columnas, en una agregue un Encabezado y un Botón, y en el otro agregue mi imagen sin fondo (PNG) para crear ese efecto que destaca el texto y la imagen.

Animación de imagen o botón

Este particular efecto hace que tus imágenes o CTA’s se vean muy dinámicos a la hora de pasar el cursor por encima de este, dándole esa personalización que tanto nos gusta.

Animación de imagen y botón

Gráfico de baby yoda para crear un efecto hover en elementor.

Para crear este efecto dinámico, tenemos que seleccionar la imagen o botón e irnos a «Estilo» y dentro de la sección imagen cambiar a «ENCIMA», y en «Animación al pasar el ratón» colocaremos el efecto que más nos guste, en mi caso fue el «Bob».

Gráfico de cómo crear una animación con efecto hover en una imagen con Elementor.

Para crear la animación del botón, seguiremos los mismos pasos para agregar la animación, pero si queremos que cuando nuestro cursor este encima del botón cambie de color, nos iremos a «Color de fondo» y escogeremos el color que más nos guste.

Gráfico de creación de efecto hover en botón.

Efecto sombra

Este efecto no suele usarse mucho, pero no deja de ser un recurso bueno para tu página.

El efecto sombra

Crear este efecto es fácil, tenemos que seleccionar el fondo que queremos darle el efecto, ahora nos iremos a Borde en vez de fondo, y ahí seleccionaremos «ENCIMA» y en la sección de «Sombra de caja» daremos clic al lápiz y los personalizaremos a nuestro gusto.

Gráfico de la creación de efecto hover con sombra con Elementor.

Y eso es todo, pero no deja de ser una herramienta útil, podemos hacer muchas combinaciones con esta herramienta, así que no la infravaloremos.

Efectos sobre el radio de un borde

Este es uno muy atractivo, ya que genera que los bordes de un objeto se redondeen, esto junto con un efecto de animación grow seria fantástico.

Para crear este efecto, esta vez lo haremos desde «Avanzado», una vez ahí, nos iremos a «Borde» y luego a «ENCIMA», ahora colocaremos la cantidad que nos guste para que genere un borde, en mi caso escogí 100 px que basto para darle el efecto redondo.

Gráfico de la creación del efecto hover con radio en elementor.

Y ya lo tenemos, podemos aplicar esto con secciones, columnas, imágenes, etc.

Podemos mezclar estos efectos y crear cosas maravillosas, el limite lo pones tú.

¡Listo! hoy aprendimos a crear el efecto hover con un fondo solido, con una imagen, la superposición de colores, animación de imágenes o botones, el efecto sombra y el radio de un borde, existen muchos más, como el efecto hover scroll, que tan solo con unas cuantas líneas de código CSS crearas un efecto super atractivo para tu sitio web.

Recuerda que podemos mezclar los efectos y crear cosas muy atractivas como añadirle un ancla y mejorar la experiencia de usuario. Ya dependerá de ti y tu creatividad, diviértete practicando con los efectos.

Espero que te haya ayudado mucho este post, si te quedo alguna duda o critica constructiva la caja de comentarios de abajo esta disponible para leerte.

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

12 respuestas

  1. Hola Smith, estoy buscando cómo aplicar el efecto Hover sobre las imágenes destacadas y no encuentro la solución. Quiero que en la página del archivo, donde salen todos los posts del blog, cuando pases el cursor sobre la imagen destacada, cambie a otra imagen. He visto sitios así pero no sé cómo hacerlo con Elementor. ¿Tienes alguna idea? Gracias.

    1. Hola Gerard, para aplicar el efecto hover en las imágenes destacas tienes que irte a los estilos de tu bloque de post, luego abrir la sección «imagen» y acá habrá un botón que se llame «encima» o «hover» según el idioma de tu elementor. Ahí podrás colocar filtros CSS que desees como difuminación, brillo, contraste, etc.

      Ahora si deseas que tu imagen destacada «A» cambie a una imagen destacada «B», tendrías que agregar estilos de CSS dentro de la herramienta «CSS personalizado» de elementor (solo disponible en la versión pro) y agregar el estilo content dentro del bloque «post».

      Te dejare el estilo listo para usarlo:

      selector .elementor-post__thumbnail__link:hover {
      content: url('agrega_el_url_de_la_imagen_destacada_b');
      }

      Espero haberte ayudado, si tienes otra consulta me escribes

      Saludos.

  2. Hola! Me ha gustado todo lo que has indicado y casi, casi encuentro lo que necesito jeje solo me faltaría ver como hacer para que una imagen de hover sea cliqueable! Porque con la manera que indicas en «Cambiar imagen de fondo de un bloque» no tiene esa posibilidad 🙁 espero me puedas ayudar.

    Muchas gracias de antemano.

    1. ¡Qué bueno que te haya gustado Carlos!
      Si quieres que una columna o sección tenga la opción de colocar un enlace, te recomiendo que instales el addon «Elementor Addons Element» y activar «Wrapper Link» para que tengas la opción de agregar links en las columnas y secciones.

      Espero que te haya servido

      ¡Un saludo!

    1. Hola Brenda, para que eso pase puedes hacerlo con unas cuantas líneas de CSS, ya que Elementor no cuenta con una sección de hover para encabezados o textos de párrafos.
      Si no quieres usar CSS, un truco es usar un botón en vez de un texto de párrafo o encabezado y cuando le des a «al pasar el cursor» le cambias la transparencia a 0. Y así cuando pones el cursor encima el texto se pone transparente.
      Espero haberte ayudado Brenda, si deseas que te explique como hacerlo con CSS me comentas y lo trabajamos.

      ¡Un Abrazo!

  3. ¡Excelente artículo! Muchas gracias 🙂
    Yo lo que estaba buscando era como hacer que aparezca texto al pasar el cursor. Por ejemplo, que cambie la imagen pero también el texto de la imagen. O como opción B, cómo hacer que se abra una pequeña pestaña de información justo debajo de la imagen (sin ir a una nueva página). ¿Conoces algún tutorial para eso? Soy muuuy nueva en este mundo jajaja 🙂

    1. Hola Iriana, ¡qué bueno que te haya encantado el artículo!.
      Un truco para que el texto que uses aparezca al pasar el cursor, es usar un botón en el cual al texto le pones transparencia 0 y cuando configures para «Al pasar el cursor» (hover) le pongas transparencia 100% y el color que desees, entonces con este truco puedes generar ese efecto.
      Otra opción es editarlo con CSS, haciendo lo mismo, poniendo que la columna tenga 0% de transparencia y cuando pases el cursor encima de la sección poner que tenga transparencia 100%, ya luego si deseas colocar animaciones como que suba a la vez que aparece se puede hacer.
      Un ejemplo simple y rápido de como estaría quedando, sería así:
      .columna{
      opacity: 0;
      }

      .seccion:hover .columna{
      opacity: 100;
      }

      A través de estas líneas de CSS le estoy diciendo que a la «columna» le pongas transparencia 0, y cuando pongas el curso encima de la sección(hover) quiero que la columna tenga una opacidad de 100% o tambíen puedes usar 1 como valores binarios representando el 0 como 0% el 0.5 como el 50% y el 1 como el 100%. Además si deseas puedes darles transiciones para que el cambio no sea brusco.

      Creo que me explayé mucho , pero espero haberte ayudado Iriana.
      Me comentas si te quedo una duda o si deseas que haga un artículo explicando mejor sobre cómo hacerlo con CSS.

      ¡Un saludo!

  4. Hola smith, estoy intentando aplicar un hover a un texto al pasar el mouse por una columna, es decir, sin cuando este el mouse encima de la columna se cambia el color del texto

    1. Hola, Pablo.
      Para realizar este efecto un truco es usando un botón, pero en caso de que la columna tenga más elementos los estarías haciendo a través de unas líneas de CSS.
      Lo primero que debemos hacer es añadir un nombre de clase CSS a tu columna. En este caso le pondremos «hover-columna» (esto lo haces en la sección «avanzado» en el campo «Clases CSS»). Una vez añadido el nombre estaremos añadiendo las siguientes clases en el mismo «Custom CSS» de elementor PRO o en caso de no tener Elementor PRO en Personalizar, CSS adicional del tema:
      En caso de que el texto sea un título añades el siguiente fragmento:

      .hover-columna:hover .elementor-widget-heading .elementor-heading-title{
      color: #fff !important;
      }

      En caso de que sea un párrafo de texto añades el siguiente:
      .hover-columna:hover p{
      color: #fff !important;
      }

      En ambos casos para cambiar al color que desees solo reemplazarías el «#fff» por el que desees.

      Espero haberte ayudado Pablo.

      Un saludo.

  5. Hola Smith, ¿Cómo estás?

    Estoy intentando armar un rompecabezas, y la idea que cada vez que pase el cursor por alguna pieza, esta aplique el efecto «Grow» pero por encima de las otras piezas,, no logro que está quede de esa manera. Al pasar el cursor aplica el efecto, por por detrás de las otras piezas.

    ¿Me podrías dar un tips por favor?

    1. Hola, Isaac
      Entiendo lo que comentas, lo que tienes que añadir la propiedad z-index al elemento que esté haciendo el efecto grow, esta es una propiedad indica el orden de un elemento posicionado y sus descendientes.
      De esta manera no tendrás ese problema.

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