HOVER ZOOM IN: QUÉ ES

Aclaremos primero estos conceptos:

• Se conoce como HOVER al efecto resultante al pasar el ratón por encima de algún elemento de la web. Es uno de los efectos de diseño CSS más recurrentes en diseño web.
• Por ZOOM IN nos referimos al efecto de acercar o hacer zoom para agrandar el tamaño de un elemento.

En la entrada de hoy, veremos cómo hacer para que las imágenes de nuestra web con WordPress + Divi se agranden al pasar por encima el ratón.

Y sí, os adelanto ya que nos tocará trabajar con un poquito de código.

Es un efecto muy bonito que añade dinamismo al diseño web, y la verdad es que me lo piden muchos de mis clientes.

Hoy veremos el ejemplo con mi cliente DERBY CARBURANTES, cuya web estoy lanzando, y que nos ha pedido una manera elegante de que se vean bien sus productos sin recargar demasiado la web.

Aquí podéis ver las imágenes de los productos, totalmente estáticas, sin ningún efecto al pasar el ratón:

PASO 1. AÑADIR EL CSS AL CÓDIGO GENERAL DE DIVI

Lo primero que haremos será añadir un trocito de código al código fuente de Divi.

Para ello, nos iremos a las opciones del tema de Divi:

En la misma primera pestaña de GENERAL, nos iremos hasta abajo, donde podemos poner código personalizado:

Y una vez aquí, pondremos el código que os pongo más abajo, y guardaremos cambios.

.et-zoom-in,
.et-zoom-in a {
overflow: hidden;
}

.et-zoom-in.et_pb_image img,
.et-zoom-in .et_pb_image_wrap img,
.et-zoom-in a img {
transition: all 1s 0s ease;
}

PASO 2. AÑADIR CSS A LOS MÓDULOS DE IMAGEN

Ahora que ya lo tenemos en el CSS del tema, tendremos que añadirlo a las imágenes en las que queremos lograr el efecto.

Para ellos, nos iremos a la imagen en cuestión, y añadiremos CSS adicional en el apartado AVANZADO – ID Y CLASES DE CCSS – CLASE CSS.

RESULTADOS 

Con estos sencillos pasos, ya tenemos nuestro elegante efecto zoom-in en hover:

Si queréis añadir el efecto a varias imágenes, sólo teéis queañadir el CSS adicional del paso 2 en los módulos de imagen de Divi, el paso 1 sólo se hace una única vez en el CSS general.

Y si queréis ir todavía más rápido, recordad que ya podéis copiar-pegar estilos de módulos en Divi!