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