CSS: Efectos sobre imágenes

Desde CSS podemos aplicar unos efectos vistosos sobre las imágenes de una manera muy sencilla. En concreto hablo de:

• Alterar la opacidad
• Poner la imagen en escala de grises
• Poner la imagen con tonos sepias

Opacidad:

.opacity{opacity:0.5}

Escala de grises:

.grayscale{filter:grayscale(100%)}

Sepia:

.sepia{filter:sepia(75%)}

Pongo aquí un ejemplo incrustado para que veáis como queda. Recordad que podéis ver el código dentro de él pulsando el botón de html o de css.

See the Pen Sepia Image by Gabriel Cuesta Arza (@gabicuesta) on CodePen.

Obviamente si utilizamos el selector hover al pasar el ratón por encima de la imagen podríamos aplicar el efecto:

See the Pen Hover Sepia by Gabriel Cuesta Arza (@gabicuesta) on CodePen.

Espero que os sea de utilidad.