+34 644 20 61 33 / +52 81 321 81 333 info@laraprado.com

Escrito por Lara Prado

Consultora y Formadora en Marketing Online. Directora en la agencia de marketing online Lanzadera Online.

07.21.2020

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_pb_image:hover img,
.et-zoom-in .et_pb_image_wrap:hover img,
.et-zoom-in a:hover img {
transform: scale(1.3);
transition: all 2s 0s ease;
}

.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.

et-zoom-in

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!

Y esto es todo por hoy!

Espero que os sea de utilidad 🙂

Os ha funcionado?

Si os da error el script, en esta entrada de blog  inglesa tenéis el original. Y es que sigo buscando opción para poner códigos no ejecutables en el blog, si concéis algun plugin o similar, por favor compartídmelo!

Cualquier duda o aportación, no dudéis en dejarme un comentario y lo veremos juntos con toda la comunidad!

Y ya sabéis que si necesitáis ayuda o directamente preferís subcontratar esta tarea, podéis contratar mis servicios!

Lara Prado.

Y hasta aquí esta entrada en nuestro blog de marketing online.

¿TE HA SIDO ÚTIL? ¿HA RESUELTO TU PROBLEMA? ¿TE AYUDARÁ EN TU PROYECTO ONLINE?

Si es así…TE RUEGO que por favor contribuyas a nuestra comunidad devolviendo el favor con algunas de las siguientes opciones:

 

Contrata nuestros servicios.

¿Te quedan cosas por hacer en tu proyecto online?

¿Podemos ayudarte en algo más?

Consulta nuestros servicios y precios súper asequibles.

Invítanos a un café.

Igual que a cualquier amigo 🙂

Clica en el icono del café de la esquina o aquí e invítanos a un café virtual con un par de cómodos clics 🙂

Comparte esta entrada.

Ayúdanos a compartir esta entrada en tus redes sociales 🙂

Suscríbete a nuestra newsletter.

Déjanos tu email para enviarte más contenido interesante y gratuito como este.

w

Déjanos un comentario.

Tus comentarios nos dan feedback, ayudan a la comunidad y afectan positivamente a nuestro SEO.

Visita más entradas del blog.

Sigue navegando por nuestra web en cualquiera de nuestras otras entradas del blog.

0 comentarios

Enviar un comentario

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