Aplicar efectos de colores con CSS a las imágenes

Tiempo estimado de lectura: 8 minutos

 

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:

/* imagen a escala de grises */
.gris:hover {
filter: grayscale(80%);
transition:all .5s ease-in-out;
}

Y el resultado es este:

Efectos de colores con CSS: efecto escala de grises
Efectos de colores con CSS: efecto escala de grises

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:

/* imagen con saturación de color */
.saturacion:hover {
filter: saturate(180%);
transition:all .5s ease-in-out;
}

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 saturación (aumentar la saturación de color)
Efectos de colores con CSS: efecto saturación (aumentar la saturación de color)

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:

/* imagen con tono sepia */
.sepia:hover {
filter: sepia(60%);
transition:all .5s ease-in-out;
}

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 sepia
Efectos de colores con CSS: efecto sepia

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:

/* imagen con brillo */
.brillo:hover {
filter: brightness(200%);
transition:all .5s ease-in-out;
}

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:

Efectos de colores con CSS: efecto brillo
Efectos de colores con CSS: efecto brillo

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:

/* imagen con contraste */
.contraste:hover {
filter: contrast(200%);
transition:all .5s ease-in-out;
}

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

Efectos de colores con CSS: efecto contraste
Efectos de colores con CSS: efecto contraste

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:

/* imagen con rotación de tono */
.tono:hover {
filter: hue-rotate(90deg);
transition:all .5s ease-in-out;
}

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

Efectos de colores con CSS: efecto tono
Efectos de colores con CSS: efecto tono

Efecto invertir

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

/* imagen con los colores invertidos */
.invertir:hover {
filter: invert(100%);
transition:all .5s ease-in-out;
}

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:

Efectos de colores con CSS: efecto invertir
Efectos de colores con CSS: efecto invertir

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:

/* imagen con opacidad */
.opacidad:hover {
filter: opacity(30%);
transition:all .5s ease-in-out;
}

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:

Efectos de colores con CSS: efecto opacidad
Efectos de colores con CSS: efecto opacidad

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:

/* imagen desenfocada */
.desenfoque:hover {
filter: blur(5px);
transition:all .5s ease-in-out;
}

Y el resultado será este:

Efectos de colores con CSS: efecto desenfoque
Efectos de colores con CSS: efecto desenfoque


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja una respuesta

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros, salvo por imperativo legal.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *