Galeria Divi. Efecto zoom al pasar por cada imagen
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.
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.
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. 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
2.- Si estas usando un tema hijo
3.- Nuestra zona favorita, en la página
Pulsa el botón (la cámara) que tienes abajo o desplázate hacia abajo si quieres ver la galería terminada.
/*--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); }
Me ha funcionado perfecto, me encanta como me esta quedando la portada, pero te quiero preguntar como hago para que salga el nombre de la imagen justo en medio de la imagen y que lleve a una categoría de producto, he visto también el otro tuto de galería con link pero me da miedo mezclar los CSS no vaya a ser que la lie, mil gracias por tu ayuda, te sigo constantemente.
Gracias, Gloria, por tus palabras
Efectivamente el segundo tutorial se refiere a lo que estás buscando. Haz pruebas en un entorno que no afecte a tu web, por ejemplo en tu ordenador con XAMPP o en un sitio de pruebas. Es cierto que el tutorial de la galería con link es un poco más complejo, pero tambien te permitirá repasar otros conceptos. Suerte!!!
Hola, he seguido tu tutorial y el efcto es muy bueno. Pero quisiera hacerte una pregunta. Observo que una vez que haces clic en alguna imagen las opciones que la galería Divi te ofrecen son muy pobres. yo he visto lightbex con muchas opciones, incluso hasta de carrusel. La que más me interesa es la de hacer clic y que haga zoom, ya que sólo se limita a que cuando haces clic a la derecha se pasa a la imagen siguiente o clic a la izquierda imagen anterior. ¿Se podría hacer con CSS algo parecido a clic y zoom? Gracias y saludos
No sé si te he entendido bien. Quieres que haga zoom una vez se ha abierto la imagen. La imagen se abre al tamaño máximo, pero dependerá de el tamaño de origen. Existen plugins que amplian funcionalidades a las galerias.
Saludos