Crear Zoom en Imágenes con CSS al pasar el ratón (Hover) en WordPress

Hola Chicos,

Hoy os traigo un tutorial muy sencillo pero creo que os puede resultar de mucha utilidad.

Vamos a ver como podemos crear una imagen con zoom al pasar el ratón por encima como la siguiente:

Tutorial en Vídeo

Lo primero que vamos a hacer es añadir una clase a la imagen para que podemos aplicar estilo exclusivamente a esta imagen y no a todas las imágenes de la web.

En el caso de mi web sería:

<img class="zoom" src="https://comohacerunapagina.es/wp-content/uploads/2018/05/imagen-aleatoria.jpeg" alt="imagen aleatoria con zoom">

Ahora que ya tenemos la clase creada vamos a añadir el css, para ello vamos a Personalizar –> Css Adicional:

Aquí tienes el código que hace falta:

.zoom {
    transition: transform .2s; 
}

.zoom:hover {
    transform: scale(1.5); 
}

El css anterior se compone de dos partes:

Hacer zoom a la imagen

El CSS encargado de esta partes es el siguiente:

.zoom:hover {
    transform: scale(1.5); 
}

Aunque este código hace perfectamente el Zoom queda muy brusco ya que pasa de una posición a la siguiente sin estados intermedios.

Transición de uno estado al otro de forma gradual

Para que se vea una animación suave entre ambas posiciones le añadimos al css la siguiente parte:

.zoom {
    transition: transform .2s; 
}

Aquí le decimos que se transforme desde la posición inicial a la final en 0.2segundos.

Cambiando el tiempo variamos la velocidad de la transformación.

Cómo puedes ver es muy sencillo y puede resultarnos de mucha utilidad