Efecto zoom CSS sobre imágenes


PorUgaoProject

Efecto zoom CSS sobre imágenes

Zoom CSS, sin programar, este es un efecto tan fácil como visualmente interesante. A parte de una serie de estilos que cambiarán dependiendo de cada caso podemos ver 3 claves para que esto funcione.

Primero metemos las imágenes en un contenedor al que le vamos a dar unas medidas, y lo mas importante, vamos a decirle que todo lo que le desborde no sea visible, ya que cuando nos posicionemos sobre la imagen esta aumentará de tamaño.

.marcoFoto {
width: 33%;
overflow:hidden;
}

La segunda parte viene con la imagen, a la que le diremos que ocupe el total de su contenedor o marco si pensásemos que es una foto real. Ademas pensando en el efecto para que la imagen no se vuelva grande derrepente, sino que aumente y disminuya de tamaño progresivamente usaremos la propiedad transition que tendrá efecto cuando nos posicionemos sobre la imagen aunque no este en un selecctor con :hover

.marcoFoto img {
transition: all .4s ease;
width:100%;
}

Finalmente vamos a decirle que transformaciones queremos aplicarle cuando se produzca el evento de posicionarnos sobre la imagen (:hover). En este caso le vamos a decir que se aumente el tamaño de la imagen a un tamaño de 150% creando un efecto de zoom y conjuntamente que gire 20 grados para darle mas vistosidad, ademas le estamos diciendo que se transparente la imagen teniendo esta una opacidad del 60%

.marcoFoto img:hover {
transform:scale(1.5) rotate(20deg);
opacity:0.6;
}

Código completo del ejemplo

Ejemplo en funcionamiento:

Imagen Zoom CSS 1
Imagen Zoom CSS 2
Imagen Zoom CSS 3

Sobre el autor

UgaoProject administrator

2 comentarios hasta ahora

UnaiPublicado en  9:50 am - Jul 6, 2017

Muchas gracias! muy útil y bien explicado

IxonePublicado en  7:07 pm - Jul 22, 2017

muy buen aporte! gracias!

Deja un comentario

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

Aviso de cookies