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.
