CSS: Efectos de color de imágenes como Spotify

¿Cómo aplicar, con CSS, efectos de color en imágenes como lo hace Spotify? Con la siguiente técnica podrás aplicar los siguientes efectos de fundido, que seguro que has visto en programas de edición fotográfica como Photoshop: multiply; screen; overlay;darken; lighten; color-dodge; color-burn; hard-light; soft-light; difference; exclusion; hue;  saturation;  color;  luminosity;

Es tan fácil como emplear las siguientes clases CSS:

.column::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all ease-in-out .5s;
}

 

.green::after{
  background-color: #23278a;
  mix-blend-mode: lighten;
}

Fuente y DEMO en:

» How to Create Spotify Colorizer Effects With CSS Blend Modes

Autor: Janmi

Janmi es un informático entusiasta de la ciencia ficción, el diseño gráfico, el universo de Tolkien, fantasía épica y otras cosas frikis. Apasionado por la tecnología, ya sea desde el punto de visto técnico, domótico, funcional o de diseño.