Efecto rollover en Divi. Mostrar información al pasar el ratón por una imagen en 3 pasos con Divi

Efecto rollover en Divi. La idea

A veces necesitamos que una determinada información se muestre sólo cuando se desencadene algún tipo de interacción. Veremos en este tutorial un Efecto rollover en Divi y cómo implementar el código CSS necesario para desplegar de forma elegante información al pasar el ratón (rollover) por una zona determinada, en este caso una imagen.

Te mostraremos cómo agregar un efecto simple a las fotos de unos peculiares miembros de una empresa, que mostrarán una pequeña biografía cuando pases el mouse sobre ellas. Todo esto lo vamos a hacer con el módulo de texto de Divi y unos cuantos «copiar y pegar» de código CSS, todo de forma indolora.

Podríamos usarlo para complementar una imagen, describir las habilidades de nuestro equipo comercial, por ejemplo; o para lo que se nos ocurra.

Esta práctica está inspirada en un post de la web de elegantthemes, pulsa aquí para ver la versión original, en inglés.

Puedes ver la demo de cómo quedará al final del post o pulsando aquí.

Paso 1: Preparación y subida de tus fotografías

Lo primero que vamos a hacer es subir las fotos del equipo que vas a utilizar a la biblioteca de WordPress.

Para este tutorial, nos vamos a asegurar de que las imágenes tengan el mismo tamaño y la misma relación de aspecto. También queremos que las fotos tengan un tamaño decente. Para este ejemplo, usamos imágenes de 500px por 500px.

Una vez que subamos las imágenes, debemos copiar y pegar en una archivo de texto las URLs respectivas de cada foto, ya que las necesitaremos más adelante.

Estas URLs las podemos encontrar haciendo clic en la miniatura de una foto en la biblioteca y en el lado derecho de la página Detalles de adjuntos. Puedes verlo en la imagen.

Una vez hayamos acabado de apuntar las URLs, estaremos listos para crear la sección que mostrará las fotos y sus efectos.

Paso 2: Creando nuestra sección

Como siempre, creamos una nueva página o entrada y activamos Usar constructor Divi, tendremos una sección estándar. Asigna a la sección un color de fondo oscuro. En este ejercicio hemos elegido como fondo el color #363F45.

Ahora pulsa insertar columnas y selecciona 1 columna, inserta un módulo de texto y añade el texto que quieras para titular la sección. Nosotros hemos puesto «ESTE ES NUESTRO EQUIPO». El color del texto debe ser blanco. También puedes personalizar el texto configurando tipografía (Open Sans), tamaño (40 px) y justificación (centro). Entre paréntesis lo que hemos usado nosotros.

Vale, ahora creamos una nueva fila que contendrá las imágenes con el efecto. Nosotros hemos creado una fila con 4 columnas, configúralo tú como más te convenga. Dependiendo delo texto que quieras mostrar, tal vez te interese 2 ó tres columnas para dar más espacio para mostrarlo.

Ahora añade un módulo de texto y, en modo editor de texto, o sea, HTML (ver imagen), inserta el siguiente texto:

<div class="hover-bio-wrapper">
<div class="hover-bio">
<figure class="hover-bio">
<img src="PON AQUÍ LA URL DE LA IMAGEN">
<figcaption>
<h2>TITULO IMAGEN</h2>
<p>DESCRIPCION</p>
</figcaption>
</figure>
</div>
</div>

En esta imagen lo verás más claro:

Editor de Texto en modo HTML (A)

Configurar nuestro contenido

Cambia lo siguiente en este código:

• Es importante que esté el editor en modo HTML (A), no en modo Visual.
• Después de la etiqueta <img src=, entre las comillas, debes poner la URL de la imagen correspondiente (B), recuerda, la que has copiado en un archivo de texto antes.
• Entre las etiquetas de encabezado <h2> sustituye TITULO IMAGEN por el título que quieras dar a cada imagen (C).
• Por último, entre las etiquetas de párrafo <p> debes escribir el texto que quieras para describir la imagen (D).

Una vez cambiado los textos, pulsa en guardar y salir y duplica el módulo las veces que necesites. Para este tutorial hemos utilizado 4 imágenes por lo que necesitaremos 3 módulos más. Despuás de duplicarlos cambia url, título y contenido como hemos hecho en en el primer módulo de texto.

Ahora tenemos ya casi terminado nuestro ejercicio. Tan sólo necesitamos copiar y pegar el código CSS.

Paso 3: Copiar y Pegar el código CSS

Ahora copia el siguiente código CSS que pegaremos en la pestaña CSS de los ajustes de la página.

 .hover-bio-wrapper {
 position: relative;
 color: rgba(0,0,0,0);
 width: 100%
}
  
figure.hover-bio img{
 display: block;
}
  
figure.hover-bio {
 position: relative;
 overflow: hidden;
 margin: 0;
 padding: 0;
 display: inline-block;
 line-height: 0;
  
}
  
figure.hover-bio::before, figure.hover-bio::after{
 position: absolute;
 background: black;
 opacity: 0.3;
 content: '';
 height: 100%;
 width: 100%;
 display: block;
 top: 0;
 left 0;
 -moz-transform: translate3d(0, -100%, 0);
 -webkit-transform: translate3d(0, -100%, 0);
 transform: translate3d(0, -100%, 0);
 -moz-transition: all 0.8s;
 -webkit-transition: all 0.8s;
 transition: all 0.8s;
}
  
figure.hover-bio figcaption{
 position: absolute;
 background: #fff;
 display: block;
 line-height: 1.7em;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 text-align: left;
 padding: 10px;
 z-index: 100;
 width: 100%;
 max-height: 100%;
 overflow: hidden;
 top: 50%;
 left: 0;
 -moz-transform: translate3d(-100%, -50%, 0);
 -webkit-transform: translate3d(-100%, -50%, 0);
 transform: translate3d(-100%, -50%, 0);
 opacity: 0;
 -moz-transition: all 0.8s;
 -webkit-transition: all 0.8s;
 transition: all 0.8s;
}
  
figure.hover-bio img{
 -moz-transform: translate3d(0, 0, 0);
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
 -moz-transition: all 0.8s;
 -webkit-transition: all 0.8s;
 transition: all 0.8s;
}
  
figure.hover-bio figcaption{
 top: 100%;
 opacity: 1;
 -moz-transform: translate3d(0, 0, 0);
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
  
figure.hover-bio:hover img {
 opacity: .5;
}
  
figure.hover-bio:hover figcaption{
 background-color: #15cbef;
 color: #fff;
 opacity: .9;
 -moz-transform: translate3d(0, -100%, 0);
 -webkit-transform: translate3d(0, -100%, 0);
 transform: translate3d(0, -100%, 0);
 -moz-transition: all 0.8s;
 -webkit-transition: all 0.8s;
 transition: all 0.8s;
 box-shadow: 0px -2px 28px rgba(255,255,255, 0.3);
}

Puedes cambiar algunos valores del código si quieres para personalizar color, velocidad de animación, transparencia, etc.

Una vez hayas copiado el código, pulsa en los ajustes de página, arriba a la derecha y en la pestaña CSS, pégalo ahí.

Aquí pegamos el código CSS

¡Y ya lo tenemos! Abajo puedes ver el resultado.