Hoy veremos cómo crear éste hermoso efecto de animación hover de texto, que aparece al pasar el mouse sobre una imagen.
Como sabrán, de manera nativa en el tema Divi no hay un módulo en si que haga éste efecto.
Puesto que se necesita un elemento que tenga tanto imagen como texto, utilizaremos el módulo anuncio (Blurb) y con un poco de código CSS (que encontrarás más abajo), haremos que se transforme en lo que queremos lograr.
Éstos cuadros de imágenes con efecto de superposición de texto al pasarle el ratón (hover). Hará más impactante tu diseño de pagina web y lo diferenciará de otros hechos con Divi.
¿Quieres más efectos Divi Image Hover?
Como dijimos, hoy crearemos éste tan utilizado efecto (Muy útil para mostrar información adicional en las imágenes), usando sólo un poco de código y sin necesidad de instalar nada adicional.
Opcionalmente, si deseas más efectos similares, para darle a tu web un más elaborado y llamativo diseño, te recomendamos el plugin premium: Divi Flash.
Éste plugin añade una serie de módulos extra a los que ya vienen en Divi por defecto. Entre los nuevos módulos que agrega, se encuentran los módulos: “Divi Image Hover” y “Divi Hover Box”. Que llevan el juego entre texto, imágenes y otros elementos a un nuevo nivel, con animaciones mucho más elaboradas. Y lo mejor, podrás configurar todo desde módulos Divi, sin necesidad de tocar ninguna clase de código.
Aquí debajo, al pasar el mouse sobre las imágenes, puedes ver algunos ejemplos:
Creative Control
Endless Possibilities
Compose Design Style
Éste plugin es premium, y si eres una agencia, puedes adquirir un plan lifetime para sitios ilimitados desde su web oficial.
Por otro lado, si deseas trabajar con éste fantástico plugin sólo en 1 sitio web, puedes optar por el servicio de activación de licencias de Rapihosting (Nuestro proveedor de hosting WordPress de confianza), que con súper precio te instalan una licencia lifetime en tu sitio, y puedas contar con el plugin con todas las funciones y actualizaciones de por vida. Consíguelo desde aquí.
Si deseas ver más ejemplos del uso de éste plugin:
Ver demos del Módulo Divi Image Hover
Ver demos del módulo Divi Hover Box
Dicho esto, empecemos con el tutorial.
Divi Flash
Divi Machine
Divi Bodycommerce
Divi Plus
Tema Divi
Creando el efecto hover texto sobre imágenes
Veámos cómo hacerlo paso por paso:
Paso 1: Agregar Nombre de clase vic-overlay al Módulo Anuncio de Divi
Como dije anteriormente, vamos a utilizar el módulo anuncio de Divi como materia prima para el Image Hover Overlay.
Para éste ejemplo, he agregado tres anuncios en una fila de tres columnas. Les he asignado sus respectivas imágenes, títulos y textos. Por defecto, se ven de ésta manera:
Para que el código que agregaremos más adelante le haga efecto, debemos asignarle la clase CSS: “vic-overlay” a todos los módulos anuncio (Blurb) que deseamos transformar.
Las clases se agregan desde la configuración del módulo, en la pestaña avanzado>ID y Clase css, como se ve en la imagen de abajo.
Paso 2: Agregar el Código CSS que transformará todo
Ahora vamos a agregar el código que hará la magia. Para ello debemos añadir un módulo código (valga la redundancia) en el diseño y pegarlo ahí. Tan simple como eso.
Para que puedan visualizar el snippet de éste tutorial, solo dejen su correo en el formulario de abajo y hagan click al botón: “Ver códigos”.
Y automáticamente serán visibles…
Adicionalmente, se te enviará a tu bandeja de entrada un mail de confirmación para ser añadido a mi lista de correos. Es opcional, pero déjame decirte que con la comunidad de mi lista comparto nuevos trucos geniales cómo éste, códigos, tutoriales, promociones y sorteos de productos de la sección de Recursos Premium. Además que tenemos una comunicación más directa para compartir y resolver dudas. 🙂
Código para Copiar y Pegar:
Gracias por suscribirte!
IMPORTANTE – Se te ha enviado un correo de confirmación. Revisa tu bandeja de entrada. Por favor confirma tu correo para poder enviarte nuevos tutoriales, artículos, códigos, recursos y comunicarnos directamente 🙂
<style>
:root {
--color-fondo-vic-overlay:rgba(0,0,0,0.6);
}
.vic-overlay .et_pb_blurb_content {
display:flex;
overflow:hidden;
}
.vic-overlay .et_pb_blurb_content:hover .et_pb_blurb_container {
top:0 !important;
}
.vic-overlay .et_pb_blurb_container {
background-color:var(--color-fondo-vic-overlay);
position:absolute;
height:100%;
width:100%;
padding:15px;
transition:ease 0.4s;
display:flex;
flex-direction:column;
}
.vic-overlay.vic-overlay-hover .et_pb_blurb_container{
top:100%;
}
.vic-overlay .et_pb_main_blurb_image {
margin-bottom:0px;
}
.vic-overlay .et_pb_module_header {
margin-top:auto;
margin-left:auto;
margin-right:auto;
}
.vic-overlay .et_pb_blurb_description {
margin-bottom:auto;
margin-left:auto;
margin-right:auto;
}
</style>
Una vez que hayamos pegado nuestro código, el módulo se verá así:
Y nuestros módulos anuncio se verán de la siguiente manera, no olvidar guardar cambios.
Paso 3: Personalizando el overlay o capa superpuesta
Como habrán notado, el código creó una capa superpuesta (overlay) sobre la imagen. Ésta capa contiene tanto al título como al texto del módulo anuncio de Divi. También habrán notado que, debido a que éste overlay tiene un fondo oscuro, los textos (que tienen colores oscuros también) no se notan mucho.
Así que lo primero que haremos será cambiar los colores por defecto de los textos a colores claros, preferiblemente blanco.
Ya que estamos trabajando con el módulo anuncio, personalizar los textos (tamaños, colores, altura de línea, etc) resulta muy sencillo. Todo desde la pestaña diseño, cómo cualquier módulo del Divi Builder.
Por otro lado, si desean cambiar ese color de fondo negro semitransparente de la capa superpuesta, pueden hacerlo desde el código que agregaron en el paso 2.
En la parte que dice: “color-fondo-vic-overlay” pueden agregar su color de fondo personalizado.
En mi caso, las únicas personalizaciones que quise hacer fueron: cambiar el color de los textos a blanco. Con lo cual, me quedó de la siguiente manera:
Paso 4: Activando la animación hover de la superposición de texto
Una vez que hayan personalizado lo que deseen, se habrán dado cuenta que; si bien aparece la capa superpuesta, todavía no se ve ninguna animación al pasar el mouse.
Para activar la animación, bastará con agregar una nueva clase CSS a los módulos anuncio con los que estemos trabajando. El nombre de clase a agregar es: “vic-overlay-hover”. La clase adicional se agrega dejando un espacio, de la siguiente manera:
¿Por qué no agregamos éste nombre de clase en el paso 1, junto con el otro?
Cuando agregamos la clase vic-overlay-hover, la capa superpuesta desaparece y vuelve a aparecer sólo cuando se pasar el cursor de mouse sobre el módulo. Esto hace que se dificulte visualizarlo para poder personalizar la capa superpuesta. Por eso añadimos ésta última clase al final.
Siguiendo ésta lógica, si más adelante desean cambiar la personalización de los elementos del overlay, simplemente borren momentáneamente la clase vic-overlay-hover y la capa será visible para poder editarla más fácilmente.
A disfrutar los Resultados
Si seguiste todos los pasos, ya podrás disfrutar del hermoso efecto que se ve en la imagen de abajo.
Si te gustan éste tipo de efectos en tu web, no olvides que puedes obtener la instalación de una licencia del plugin Divi Flash en tu web a un súper precio. Y obtener muchos efectos overlay de imágenes y textos avanzados, y muy fáciles de configurar. Te viene perfecto si odias manejar código o simplemente quieres agilizar tu trabajo.
Nos vemos (¿leemos?) en el próximo artículo.
0 comentarios