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:
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
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.
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.
¡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.
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.
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.
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.
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
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”.
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.
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.
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.
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!
14 comentarios
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.
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
contentdentro 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.
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.
¡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!
Me encanto tu artículo, pude realizar un par de cosas en mi página, sin embargo no se como puede desaparecer el texto y cuando pase el cursor aparezca. Gracias
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!
¡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 🙂
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!
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
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.
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?
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.
Hola Smith, genial el post, muchas gracias por compartiirlo.. Quería preguntarte a ver si me puedes ayudar, yo lo que necesito es mostrar otra imagen al pasar el cursor por encima, pero en el caso de los productos de woocommerce.
Si me pudieras ayudar.. Muchas gracias
Hola Noelia, gracias por tus palabras .
Para eso no necesariamente se lograría con solo elementor o css, pueden variar si el tema lo tiene habilitado o si lo haces a través de php.
Lo mejor es probar con jet woo builder, woolentor o lo que yo recomiendo es Woostify que es un tema dedicado a woocommerce con elementor.
Espero haberte ayudado.
Saludos.