Aplicar efectos de colores con CSS a las imágenes

Aplicar a tus imágenes efectos de colores con CSS

Continuamos con efectos sobre imágenes, en este caso, veremos cómo les podemos aplicar efectos de colores con CSS.

¡Vamos a ello!

Efectos de colores con CSS: efecto escala de grises

Este sencillo efecto hace que tu imagen cambie su color a escala de grises cuando pases el puntero del ratón sobre esa imagen.

El código que vamos a utilizar es el siguiente:

Y el resultado es este:

El código es muy sencillo de entender: creamos una clase llamada gris, que aplica un filtro escala de grises (grayscale) del 80%, y para que ese cambio no sea brusco, le aplicamos una transición (transition) de 0,5 segundos tanto al aplicarlo como al desaplicarlo (ease-in-out).

Para aplicar este efecto, solo tienes que aplicar la clase gris en aquellas fotografías donde lo quieras ver.

Efectos de colores con CSS: efecto saturación (aumentar la saturación de color)

Al igual que el anterior,  este efecto es muy sencillo, y hace que tu imagen aumente la saturación de color cuando pases el puntero del ratón sobre esa imagen.

El código que vamos a utilizar es el siguiente:

La explicación del funcionamiento de este código es la siguiente: creamos una clase llamada saturación, que aplica un filtro de saturación de color  (saturate) del 180%, y como en el ejemplo anterior, para que ese cambio no sea brusco, le aplicamos una transición (transition) de 0,5 segundos tanto al aplicarlo como al desaplicarlo (ease-in-out).

Para aplicar este efecto, solo tienes que aplicar la clase saturación en aquellas fotografías donde lo quieras aplicar.

Efectos de colores con CSS: efecto sepia

Al igual que los efectos anteriores,  este efecto es muy sencillo, y hace que tu imagen se convierta a tono sepia cuando pases el puntero del ratón sobre la imagen.

El código que vamos a utilizar es el siguiente:

Y ahora, como siempre, la explicación del funcionamiento de este código: creamos una clase llamada sepia, que aplica un filtro sepia  (sepia) del 60%, y como en los ejemplos anteriores, para que ese cambio no sea brusco, le aplicamos una transición (transition) de 0,5 segundos tanto al aplicarlo como al desaplicarlo (ease-in-out).

Para aplicar este efecto, solo tienes que aplicar la clase sepia en aquellas fotografías donde lo quieras aplicar.

Efectos de colores con CSS: efecto brillo

Otro efecto que le aplica… ¡brillo! a la imagen que contenga la clase correspondiente. El código es el siguiente:

Y la explicación seguro que ya te la sabes 😉

Creamos una clase llamada brillo, que aplica un filtro brillo (brightness) del 200%, y como en los ejemplos anteriores, para que ese cambio no sea brusco, le aplicamos una transición (transition) de 0,5 segundos tanto al aplicarlo como al desaplicarlo (ease-in-out).

Para aplicar este efecto, solo tienes que aplicar la clase brillo en aquellas fotografías donde lo quieras aplicar. Y recuerda, el brillo al 100% es el valor por defecto, en este ejemplo se lo he subido al doble.

El resultado es este:

Efecto contraste

Es el mismo efecto que el brillo, pero con el contraste, así que el código es igual que el anterior, pero cambiando la propiedad:

La explicación del código es la misma que la del brillo, y el resultado es el siguiente:

Rotación de tono

Este código aplica una rotación de tono de la rueda cromática en la imagen. El código es el siguiente:

Y el resultado este (spoiler: El increible Hulk):

Efecto invertir

Este efecto invierte los colores de una imagen. El código es el siguiente:

La explicación de este código es igual que para los efectos anteriores, solo que con el efecto invertir, que invierte las muestras de color de una imagen.

Para ver su funcionamiento, debes aplicar la clase invertir a la imagen a la que le quieras aplicar este efecto. Los valores de este filtro van desde el 0% que muestra la imagen original, hasta el 100% que nuestra la imagen con los colores completamente invertidos.

El resultado es el siguiente:

Y para finalizar, podemos ver otros dos efectos, que aunque no sean literalmente cambio de color en la imagen, pueden dar un efecto bastante simpático. Son el efecto opacidad y el efecto desenfoque.

Efecto opacidad

Determina el nivel de opacidad de una imagen, pero para trabajar con este efecto, tenemos que saber que en realidad trabajamos con la transparencia de la imagen 😉 ya que por defecto la imagen ya es opaca, por lo tanto, para hacerla menos opaca con lo que jugamos es con la transparencia.

El código que vamos a utilizar es este:

Aquí solo tenemos que decir que el valor 0% (0), es completamente transparente, y el valor 100% (1) es completamente opaca. En este ejemplo la imagen es un 30% opaca.

Y el resultado es este:

Efecto desenfoque

Este efecto aplica un desenfoque a la imagen, cuanto mayor sea el número, más desenfocada estará la imagen.  El desenfoque se mide en píxeles, y si no le aplicas un valor, por defecto tomará el valor 0.

El código que vamos a utilizar es el siguiente:

Y el resultado será este: