Vamos a utilizar la propiedad «transform», «scale» y «transition» entre otras de CSS para conseguir unos cuantos efectos en las imágenes de nuestra web. Rotaremos la imagen en 10 grados a la derecha, aumentaremos o disminuiremos el brillo, aplicaremos un efecto blanco y negro cuando el ratón se posa sobre la imagen y también proporcionaremos un efecto zoom para que al sobrevolar la imagen se agrande ligeramente.
En el primer ejemplo vamos a iluminar la imagen al pasar el ratón:
/* iluminar imagen */
.imagen-brillo {
-webkit-filter: brightness(80%);
filter: brightness(80%);
}
.imagen-brillo:hover {
-webkit-filter: brightness(95%);
filter: brightness(95%);
}
.imagen-brillo {
transition: all 0.3s ease;
}En este caso le damos un efecto blanco y negro que al posar el mouse vuelve a su estado normal:
/* imagen efecto gris */
.imagen-gris {filter: grayscale(80%);
}
.imagen-gris:hover {filter: grayscale(1%);
}
.imagen-gris {transition: all 0.4s;}Ahora vamos a oscurecer la imagen al sobrevolar con el puntero:
/* imagen brillo oscurecer */
.mi-imagen:hover img {
-webkit-filter: brightness(50%);
filter: brightness(50%);
}
/* Ajustamos la transicion */
.mi-imagen img {
transition: all 0.3s ease;
}Rotando unos 10 grados la imagen y le ponemos una leve opacidad:
/* Propiedades de la imagen */
.imagen {
width: 100%;
height: auto;
transition: transform 0.3s ease, opacity 0.3s ease;
}
/* Definimos la transformación al pasar el ratón por encima */
.imagen:hover {
transform: rotate(10deg);
opacity: 0.3;
}La propiedad «transition» se utiliza para hacer que el efecto de rotación y opacidad sea suave y gradual.
Efecto Zoom al posar el ratón en un contenedor:
.imagen {
position: relative;
overflow: hidden;
width: 50%;
height: auto;
}
.imagen img {
display: block;
width: 100%;
height: auto;
transition: transform 0.3s ease;
}
.imagen:hover img {
transform: scale(1.2);
}La propiedad «transform» de CSS nos ayuda a escalar la imagen al 120% de su tamaño original cuando el ratón se posa sobre la imagen.
Recuerda insertar cada clase CSS en los ajustes de cada imagen. Puedes insertar varias id en un mismo bloque si deseas combinar efectos.
