<div class="img-wrap">
    <svg viewBox="0 0 600 400" width="0" height="0" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <filter id="c1">
          <feColorMatrix in="SourceGraphic"
            type="matrix"
            values="1 1 0 0 0
                    1 1 0 0 0
                    1 1 0 1 0
                    0 0 0 1 0" />
        </filter>
        <filter id="c2">
          <feColorMatrix in="SourceGraphic"
            type="matrix"
            values="1 1 1 -0.1 0
                    0 0 0 0 0
                    1 1 1 -0.1 0
                    0 0 0 1 0" />
        </filter>
        <filter id="c3">
          <feColorMatrix in="SourceGraphic"
            type="matrix"
            values="1 0 0 0 0
                    1 0 0 0 0
                    1 0 1 0 0
                    0 0 0 1 0" />
        </filter>
        <filter id="c4">
          <feColorMatrix in="SourceGraphic"
            type="matrix"
            values="0.75 0.75 0.75 0 0
                    1 1 1 0 0
                    1 1 1 0 0
                    0 0 0 1 0" />
        </filter>
        <filter id="c5">
          <feColorMatrix in="SourceGraphic"
            type="matrix"
            values="0.75 0.75 0 0 0
                    0.75 0.75 0 0 0.6
                    0 0 0 0 0.6
                    0 0 0 1 0" />
        </filter>
        <filter id="c6">
          <feColorMatrix in="SourceGraphic"
            type="matrix"
            values="0.5 0.5 0 0 0.4
                    0 0 0 0 0
                    1 1 0 0 0.4
                    0 -2 0 1 0"
            result="color" />
        </filter>
      </defs>
    </svg>
  
  <figure>
    <img class="img img--1" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85648/saffy_400px.jpg" alt="Fluffy cat">
    <figcaption>Greyscale, with blue added to the alpha channel</figcaption>
  </figure>
  <figure>
    <img class="img img--2" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85648/saffy_400px.jpg" alt="Fluffy cat">
    <figcaption>Only red and blue in all channels (no green). Negative values in alpha channel to darken the dark areas.</figcaption>
  </figure>
  <figure>
    <img class="img img--3" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85648/saffy_400px.jpg" alt="Fluffy cat">
    <figcaption>Red channel values are equal at 100%, blue channel has 100% blue, so the image is greyscale with a blue-ish tinge</figcaption>
  </figure>
  <figure>
    <img class="img img--4" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85648/saffy_400px.jpg" alt="Fluffy cat">
    <figcaption>Less red than other colours in red, green and blue channels</figcaption>
  </figure>
  <figure>
    <img class="img img--5" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85648/saffy_400px.jpg" alt="Fluffy cat">
    <figcaption>The dark parts are colorized using the multiplier channel, the light parts use red and green added to the red and green channels</figcaption>
  </figure>
  <figure>
    <img class="img img--6" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85648/saffy_400px.jpg" alt="Fluffy cat">
    <figcaption>Blown-out blue channel with remaining channels colorized</figcaption>
  </figure>
</div>

* {
  box-sizing: border-box;
}

svg {
  position: absolute;
}

.img-wrap {
  display: flex;
  flex-wrap: wrap;
}

figure {
  flex: 0 1 50%;
  margin: 0;
  padding: 10px;
}

figcaption {
  margin-top: 10px;
}

.img {
  display: block;
  width: 100%;
  height: auto;
  filter: url(#c1);
}

.img--2 {
  filter: url(#c2);
}

.img--3 {
  filter: url(#c3);
}

.img--4 {
  filter: url(#c4);
}

.img--5 {
  filter: url(#c5);
}

.img--6 {
  filter: url(#c6);
}