Como hacer efecto zoom en las imágenes WordPress

La estética de una web es sin duda una de las cosas mas importantes para captar la atención de los usuarios, consigue un efecto zoom en las imágenes aplicando estilos CSS en WordPress.

Añadir una clase en la imagen

Podemos aplicar el efecto zoom en cualquier pagina o entrada que ya tengamos hecha o una nueva.

Vamos a la imagen que queramos hacerle el efecto ponemos la visión de código (HTML)

Buscamos donde diga class=” y aquí dentro separado de las demás clases ponemos zoom” guardamos y actualizamos página.

hacer efecto zoom imagenes wordpress
Añadir una clase en una imagen WordPress

Aplicar estilos CSS en la clase

Ahora vamos a Apariencia > Editar CSS

hacer efecto zoom imagen wordpress
Editar CSS WordPress

Ya en el editor añadimos el siguiente código:

.zoom{
transition: transform 1s;
}
.zoom:hover{
transform: scale(1.1);
}

efecto zoom fotos wordpress
CSS para hacer zoom en imágenes WordPress

.zoom (esto es el nombre de la clase que le he dado, podía haber puesto cualquier otro)
{
transition: transform 1s; (hace el efecto transición en el tiempo que se le indica)
}
.zoom:hover (El nombre de la clase + hover (activa el estilo al pasar por encima con el ratón))
{
transform: scale(1.1); (transforma el tamaño / escala de la imagen a la proporción indicada)
}

Este es el código utilizado en los estilos para hacer el efecto zoom en una imagen.☝☝

Una vez terminado solo tenemos que publicar los cambios y listo!

Vídeo hacer efecto zoom en imágenes WordPress

Si te ha sido útil compártelo en tus redes sociales para ayudar a mas gente!

Sé el primero en comentar

Dejar una contestacion

Tu dirección de correo electrónico no será publicada.


*