Galeria Divi. Efecto zoom al pasar por cada imagen

por | 29 Nov, 2017 | Galería Divi

El módulo galería de Divi. 

Particularmente, el módulo galeria de Divi es una de los que más me gustan. Creo que los ajustes de los que dispone este módulo amplían enormemente las posibilidades de personalización de nuestra galería de imágenes. Y como casi todo en Divi, es posible crear galerías muy vistosas con muy poco esfuerzo. Si embargo también es cierto que la animación que se produce cuando pasamos el cursor por cada imagen es un poco sosa.

Puedes aprender más del módulo galería de Divi en este megapost.

Galeria Divi. Efecto zoom.

Y por eso vamos a aprender hoy a crear un zoom que se ejecute on hover. Esto es, al pasar el ratón por una imagen de nuestra galería. Y como ya habréis adivinado, lo vamos a conseguir aplicando un poquito de código CSS. Decirte que también puedes aplicar este efecto a tus proyectos, portfolios o imágenes de producto cambiando la clase por la que corresponda.

Preparando nuestra estructura

Empezamos como siempre creando una nueva página o entrada. Activamos el constructor Divi y, en la fila que se genera automáticamente, insertamos una columna. Quedara nuestra fila ya lista para albergar nuestro módulo. Por lo tanto hacemos clic en la columna y añadimos módulo.

Galeria Divi. Efecto zoom.insertar-modulo-galeria-Divi Cerramos el configurador del módulo. Luego ajustaremos el módulo galería, pero antes vamos preparar la fila con unos pequeños ajustes.

Ajustes de la fila

Por lo tanto pulsamos en ajustes de fila y, en la pestaña Diseño, marcamos el uso personalizado de Canalón de Ancho. Asegúrate  de que el valor del espacio entre columnas sea 2. Si está en 1, no habrá espacio entre las imágenes y al hacer el zoom se montarán sobre las otras. Si es mayor que 2, el espacio será excesivo, a mi juicio.

Ajustes del módulo galería

Ahora sí, abrimos los ajustes del módulo y configuramos.

Pestaña contenido.

En imágenes de galería, pulsamos el botón actualizar galería y añadimos las imágenes. Para la práctica, 4 serán suficientes. Conviene que todas tengan la misma anchura y altura. En mi caso he utilizado fotografías de 600px de anchura por 400px de altura. Deja en número de imágenes en cuatro y descactiva mostrar título y leyenda y mostrar paginación. No lo necesitamos.

Pestaña Diseño

En esta pestaña no hay nada especial que hacer. Deja rejilla que estará por defecto. Puedes si quieres añadir un sombra a cada imagen como yo. Para ello, en imagen > Image Box Shadow elige La segunda configuración establecida. Trastea si te apetece. sombra-imagen-galeria-divi

Pestaña Avanzado

En esta pestaña está realmente lo que nos interesa. Aquí vamos a referenciar la clase css que hará que funcione nuestro efecto. En Id y Clases CSS, en el campo Clase CSS, escribe zoomGaleria. ajustes-css-zoom-galeria-Divi Ahora pondremos el código css, bien en nuestra hoja de estilos del tema hijo si lo tenemos, en el panel CSS de las opciones de Divi o en la zona de CSS de la página que es donde yo la he puesto. Abajo puedes ver una imagen de cada zona donde puedes poner el código css.

1.- Divi > Opciones del tema

codigo-css epanel

2.- Si estas usando un tema hijo

css-hijo

3.- Nuestra zona favorita, en la página

ajustes-css-divi-builder-pagina Pulsa el botón (la cámara) que tienes abajo o desplázate hacia abajo si quieres ver la galería terminada.

El código CSS

Copia el código que te proporcionamos a continuación y pégalo en una de las tres zonas de las que te hemos hablado. El código está comentado por si quieres cambiar su comportamiento. Hacer que la animación sea más rápida o más lenta, cantidad de zoom, etc.

/*--quitamos icono--*/
.et_overlay {
display:none;
}

.zoomGaleria .et_pb_gallery_image {
/*--velocidad a la que se ejecuta la animacion--*/
-moz-transition: all 0.8s;
-webkit-transition: all 0.8s;
transition: all 0.8s;

}
.zoomGaleria .et_pb_gallery_image:hover {
/*--cambia el valor scale para que el zoonm sea mas o menos pronunciado--*/
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}

Si quieres seguir el tutorial desde un vídeo, aquí lo tienes.