Efecto zoom sobre el módulo imagen en Divi y alguna variación

por | 1 Mar, 2018 | animacion, css

En este tutorial vamos a ver paso a paso cómo crear un Efecto zoom sobre el módulo imagen en Divi. Pero no nos vamos a detener ahí, sino que haremos algunas variaciones que nos permitan entender un poco mejor el funcionamiento del CSS.

Así que vamos a analizar el código CSS que vamos a utilizar en cada uno de los supuestos e intentar explicar de la forma más sencilla posible cada acción.

Comentar que ya hicimos un tutorial parecido pero aplicado a cada imagen de una galería en divi. Puedes verlo si quieres aquí.

Efecto zoom sobre el módulo imagen en Divi. Donde poner el código CSS

Lo primero que haremos es recordar donde podemos poner el código CSS. Es posible insertarlo en tres sitios distintos según nuestras preferencias:

1.- En tu tema hijo

Si estás usando un tema hijo, navega hasta AparienciaEditor y escribe o pega el código en la hoja de estilo de tu tema hijo. Mira la captura inferior.

 

2.- En las opciones de tema Divi

Si NO usas un tema hijo, tambien puedes usar esta opción; navega desde dashboard de WordPress hasta Divi >> Opciones del tema y desplázate hasta abajo. Verás el panel de CSS personalizado donde debes pegar el código que has copiado previamente. Aquí tienes una imagen.

 

3.- En los ajustes de página

La otra opción es insertar el css en el la página, que es donde nosotros lo hemos puesto. Sólo afectará a esta página, lo que es perfecto para practicar y no «engordar» nuestra hoja de estilo de código.

 

ajustes-generales-modulo-texto

Una vez hayamos añadido nuestro código CSS (que te proporcionamos en cada ejemplo), solo nos quedará asociar la clase al módulo de imagen al que queremos aplicar el efecto. Y esto lo haremos abriendo la configuración del módulo (tienes una captura de imagen a tu izquierda), y activando la pestaña avanzando (1), abrimos el apartado ID y clases CSS (2) y ahí escribimos el nombre de la clase (3). Aquí tienes el proceso en una captura de pantalla.

 

 

El primer ejemplo. Zoom básico.

En este primer supuesto vamos a hacer un efecto básico de zoom al pasar el ratón por la imagen.

El código para este primer ejemplo es el siguiente.

.imagen-zoom img {
  transition:all 0.5s; 
  -moz-transition:all 0.5s; 
  -webkit-transition:all 0.5s; 
}
.imagen-zoom img:hover{
  transform:scale(1.2);
  -moz-transform: scale(1.2);
  -webkit-transform:scale(1.2);
}

Cópialo y pégalo en tu página, ya sabes cómo. Si no, míralo un poco más arriba.

La primera parte del código, en tres versiones para ser admitido sin problemas en cualquier navegador, determina la velocidad de ejecución del efecto. Cambia los valores y verás como cambia la animación.

La segunda parte es el efecto del zoom. Aquí podemos modificar los valores para que el zoom sea más o menos acentuado. También podemos incorporar otros efectos como veremos en el siguiente ejemplo.

Crea un modulo de imagen y en configuración del módulo >> avanzado >>ID y clases CSS escribe la clase imagen-zoom.

Aquí tienes el ejemplo. Fijate que al ampliarse se superpone con contenidos superiores e inferiores. Esto también ocurrirá en el segundo ejemplo. Verá una manera de solucionarlo en la tercera opción.

El segundo ejemplo. Zoom+sombra+borde

La clase que debes añadir a tu módulo es imagen-zoom-sombra. A continuación, el código:

.imagen-zoom-sombra img {
  transition:all 0.5s; 
  -moz-transition:all 0.5s; 
  -webkit-transition:all 0.5s; 
}
.imagen-zoom-sombra img:hover{
  transform:scale(1.3);
  -moz-transform: scale(1.3);
  -webkit-transform:scale(1.3);
-webkit-box-shadow: 0px 6px 33px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 6px 33px 0px rgba(0,0,0,0.75);
box-shadow: 0px 6px 33px 0px rgba(0,0,0,0.75);
 border: solid 6px white;
}

Para esta variación hemos agregado a la parte del evento Hoover (cuando pasamos el cursor por la imagen) algunas líneas que generan la sombra y el borde, pero solo cuando el puntero está sobre la imagen.

Cambia los valores de la sombra para obtener resultados distintos. Ya hemos hablado de los parámetros que podemos cambiar en las sombras, en otros tutoriales, aunque te lo resumimos.

box-shadow: 0px 6px 33px 0px rgba(0,0,0,0.75);

El primer valor es el desplazamiento horizontal (naranja), el segundo el desplazamiento vertical(azul), el tercero el difuminado (verde) y el cuarto la cantidad de sombra(violeta). El último valor es el color que incluye la opacidad (0.75).

En cuando al borde (border: solid 6px white;), puedes cambiar también el estilo, grosor y color.

Fíjate a continuación cómo quedaría.

 

Limitando el zoom a los límites del módulo

En ocasiones, bien porque al escalar la imagen puede interactuar con otros elementos colindantes o por cualquier razón, necesitamos que el zoom no se genere ampliando todo el módulo. A veces lo que queremos es que se ejecute sin sobrepasar los límites originales del módulo. Para ello vamos a crear el siguiente CSS.

.imagen-zoom-limite{      
  overflow:hidden;
}

Y vamos a añadir la clase imagen-zoom-limite a la que ya tenía en el módulo (separada por un espacio) donde queremos limitar el zoom. Aquí puedes ver una captura.

clase-css-zoom-imagen-limitado

 

Y aquí el ejemplo:

 

¿Podemos incorporarlo al CSS que ya teníamos sin crear una clase aparte? Por supuesto, pero el hecho de crearlo separado nos permite mayor versatilidad, podemos decidir sobre qué módulos limitar el zoom y sobre cuales no.

Abajo, en tres columnas distintas, tienes las tres variaciones del zoom que hemos explicado en este post, donde podrás observar cada con más claridad cada personalización del efecto.

Y aquí, el video tutorial


¿Te ha sido útil este tutorial? No olvides compartir y si tienes cualquier inquietud, cuéntanoslo en los comentarios.