Cómo hacer zoom en una imagen

Tiempo estimado de lectura: 3 minutos

 

Hacer zoom en una imagen (o cualquier otro objeto)

Esta semana veremos cómo hacer zoom al pasar el cursor del ratón por encima de una imagen. Continuamos con la serie de efectos sobre imágenes que estamos viendo durante las últimas semanas.

En esta ocasión veremos un efecto que me habéis pedido en varias ocasiones, y consiste en hacer zoom sobre una imagen (o cualquier otro objeto), al pasar el cursor sobre esa imagen.

Verás que el código que vamos a utilizar es muy sencillo de manejar (como casi siempre :-)), así que… ¡vamos a ello!.

Efecto para hacer zoom en una imagen: código que vamos a utilizar

Como hemos dicho anteriormente, vamos a utilizar un código muy sencillo para hacer este efecto, y será el siguiente:

.zoom {
transition: transform .7s;
}
.zoom:hover {
transform: scale(1.2);
}

¿Qué hace este código?

Ya has visto lo sencillo que es, pero como siempre, vamos a explicarlo.

En primer lugar, creamos una clase llamada zoom que creará una transformación en una transición de medio segundo. Es decir, la clase zoom aplicará una transformación (sea la que sea), en un intervalo de tiempo de 0,7 segundos.

Una vez que ya hemos definido que vamos a crear una transformación, debemos establecer qué transformación vamos a realizar. Como queremos crear un efecto zoom, la transformación que vamos a utilizar es la escala (scale). En nuestro caso, una transformación de la escala de un 120%.

Y este sería el resultado de nuestro efecto de zoom:

 

 

Cómo adaptar el código a tus necesidades

En este caso es muy sencillo adaptar el código a tus necesidades, tan sólo tienes que modificar dos valores:

  • El tiempo de transición: Si quieres hacerlo más lento, puedes probar con un tiempo de 1s (1 segundo), y si quieres hacerlo más rápido, prueba con un tiempo de .2s (2 décimas de segundo).
  • El tamaño del aumento en el tamaño de la imagen: Si quieres que aumente un 50% su tamaño, puedes cambiarle el valor de la escala a 1.5.


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja una respuesta

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros, salvo por imperativo legal.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

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

He leído y acepto la política de privacidad de este sitio. *