Crear una galería y mostrar texto al pasar el ratón por encima en Divi

Tiempo estimado de lectura: 14 minutos

 

Crear una galería de imágenes y mostrar texto al pasar el ratón por encima en Divi

En este artículo vamos a ver como crear una galería y también cómo mostrar texto al pasar el ratón por encima en Divi, es decir, cuando pasemos el ratón por encima de una de sus imágenes.

Recuerda que para poder hacer este efecto necesitas tener instalado previamente el Tema Divi, si no lo tienes, puedes comprarlo aquí o descargarlo desde la sección de recursos.

El resultado que perseguimos será el este:

Mostrar texto al pasar el ratón por encima en Divi

Crear la galería

En primer lugar vamos a crear una página para la galería, posteriormente cambiaremos el modo de edición al constructor Divi. El aspecto final que tiene que tener nuestra página es el este:

Crear una galería con Divi

El primer paso es configurar la fila, tenemos que dejar las opciones como se ven a continuación:

Configurar la fila de la galería Divi

Ahora vamos a añadir el módulo Galería con estas opciones:

Estas son las opciones del módulo Galería

Insertar las imágenes en la galería

Para añadir las imágenes tenemos que hacer clic en el botón “Actualizar Galería” y elegir las imágenes que queremos utilizar:

Añadir nuestras imágenes a la Galería

Ahora tenemos que añadir a cada imagen el texto que queramos que aparezca al hacer el efecto hover en esa imagen.
Este texto se añade en el campo leyenda al hacer clic sobre cada imagen:

Añadir la Leyenda a cada imagen de nuestra Galería

A modo de ejemplo, puedes añadir este texto a tus imágenes:

<ahref="http://www.tupaginaweb.com"><b>Añade un Título</b></br>Subtítulo aquí</a>

Esto es lo que nos srive para mostrar texto al pasar el ratón por encima en Divi.

Prácticamente está terminado, sólo nos falta añadir la hoja de estilos

Ahora tan sólo tenemos que añadir el CSS, para ello vamos a las opciones del constructor, tal como se muestra en la siguiente imagen:

Añadir el CSS a la Galería

Y añadimos el CSS desde la siguiente pantalla:

Pegar el código CSS en los ajustes de la Galería

 

Finalmente debemos añadir el código CSS

El CSS que tienes que tenemos que añadir es el siguiente:

/*---Add Links to the Divi Gallery Module and Show Captions on Hover---*/
/*Hide the image title and default overlay effect*/
.et_pb_gallery_item h3,
.et_overlay {
    display: none;
}
/*Set the position and size of the images and add an extra pixel to get rid of white space between images*/
.et_pb_gallery_grid .et_pb_gallery_image {
    position: absolute;
    width: calc(100% + 1px) !important;
}
.et_pb_gallery_caption {
    margin: 0 !important;
}
/*Set the colour of the caption text*/
.et_pb_gallery_caption a {
    color: #fff;
}
/*Set the font size and case for the title*/
b {
    font-size: 20px;
    text-transform: uppercase;
}
/*Set the position of caption text so it displays on to of the image on hover and add an outline*/
p.et_pb_gallery_caption {
    position: relative;
    background: rgba(0, 0, 0, .5);
    /*This is the colour of the image overlay on hover*/
    border: none;
    outline: 5px solid rgba(255, 255, 255, .5);
    /*This is the colour of the border*/
    outline-offset: -20px;
    /*This moves the border in a little from the edge*/
    text-align: center;
    padding: 25% 5%;
    /*Adjust the first value if using more or less text*/
    cursor: pointer;
    opacity: 0;
    /*Hide the caption until hover*/
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
}
/*Show the caption on hover*/
p.et_pb_gallery_caption:hover {
    opacity: 1;
}
/*Media queries: You will need to adjust these values if using more or less text*/
@media only screen and (max-width:1366px) {
    p.et_pb_gallery_caption {
        padding: 23.7% 5%;
        /*Adjust the first value if using more or less text*/
    }
}
@media only screen and (max-width:1280px) {
    p.et_pb_gallery_caption {
        padding: 19% 5%;
        /*Adjust the first value if using more or less text*/
    }
}
@media only screen and (max-width:1024px) {
    p.et_pb_gallery_caption {
        padding: 15% 5%;
        /*Adjust the first value if using more or less text*/
    }
}
/*This media query make the gallery display as two columns rather than three on tablets in portrait*/
@media only screen and (min-width: 768px) and (max-width: 980px) {
    .et_pb_column .et_pb_grid_item:nth-child(2n+1) {
        clear: both !important;
    }
    .et_pb_gutters1 .et_pb_grid_item:nth-child(n) {
        width: 50% !important;
        margin: 0 !important;
        clear: none;
    }
    p.et_pb_gallery_caption {
        padding: 26.5% 5%;
        /*Adjust the first value if using more or less text*/
    }
}
@media only screen and (max-width: 480px) {
    .et_pb_gallery_grid .et_pb_gallery_image {
        width: 100% !important;
        max-width: 100% !important;
    }
    p.et_pb_gallery_caption {
        padding: 24.8% 5%;
        /*Adjust the first value if using more or less text*/
    }
}
@media only screen and (max-width: 320px) {
    .et_pb_gallery_grid .et_pb_gallery_image {
        width: 100% !important;
        max-width: 100% !important;
    }
    p.et_pb_gallery_caption {
        padding: 19.4% 5%;
        /*Adjust the first value if using more or less text*/
    }
}

Con esto acabamos de obtener el resultado que estábamos buscando: mostrar texto al pasar el ratón por encima en Divi.

Mostrar texto al pasar el ratón por encima en Divi

 

Recuerda

Puedes descargarte Divi (tema original con licencia GPL) de forma totalmente gratuita desde el apartado Recursos de esta web.

¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

2 comments

  1. Me ha encantado encontrar tu página porque me estaba volviendo loca para conseguir poner texto en las imágenes. Estoy haciéndome una página web y no tengo ni idea de código, por eso elegí DIVI, pero parece que para hacer cosas como esta necesito codificar, por eso te agradecería enormemente si pudieras decirme qué líneas necesito modificar del código para conseguir que aparezcan sólo 2 imágenes en lugar de 4, ¿puedes ayudarme?
    Muchas gracias
    Un saludo

    1. Hola Pilar, ante todo déjame darte las gracias por visitar mi web y leer el artículo.
      Respecto a lo que me preguntas, fíjate en el apartado Número de imágenes (en los ajustes del módulo de galería), ahí debes poner 2; después debes ir al CSS Personalizado de la galería y añadir este código:

      margin: 0 !important;
      width: 50% !important;
      clear: none !important;

      Ahora paso a explicarte qué hace dada línea:
      margin –> centra la imagen respecto al ancho establecido (en este caso es el 100%).
      width –> hace referencia a la anchura, es decir, se divide el 100% del contenedor entre el porcentaje introducido, lo que genera las columnas resultantes, por eso, para 2 columnas el porcentaje sería 50%.
      clear –> se utiliza para que no haya espacios ni a la derecha ni a la izquierda de las imágenes.
      Espero que esto te ayude y si tienes cualquier otra consulta no dudes en hacérmela.
      Gracias de nuevo por pasarte por mi blog.
      Un saludo.

Deja un comentario

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

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

He leído y acepto la política de privacidad de este sitio. *