image filter

by phloe

HTML

<picture>
  <img src="https://www.fillmurray.com/800/450" />
</picture>

CSS

body {
  background-color: #333;
}

img {
  
}

picture {
  position: relative;
  isolation: isolate;
  display: block;
  float: left;
}

picture img {
  position: relative;
  z-index: -1;
  display: block;
  filter: grayscale(100%) contrast(1000%);
}

picture::before, picture::after {
  content: "";
  position: absolute;
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

picture::before {
  background-color: #EEE;
  mix-blend-mode: multiply;
}

picture::after {
  background-color: #333;
  mix-blend-mode: screen;
}