<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 0 0
                    0 0 0 1 0"
            result="color" />
        </filter>
        <filter id="c2">
          <feColorMatrix in="SourceGraphic"
            type="matrix"
            values="1 0 0 0 0
                    1 0 0 0 0
                    1 0 0 0 0
                    0 0 0 1 0"
            result="color" />
        </filter>
        <filter id="c3">
          <feColorMatrix in="SourceGraphic"
            type="matrix"
            values="0 1 1 0 0
                    0 1 1 0 0
                    0 1 1 0 0
                    0 0 0 1 0"
            result="color" />
        </filter>
        <filter id="c4">
          <feColorMatrix in="SourceGraphic"
            type="matrix"
            values="1 1 1 0 0
                    1 1 1 0 0
                    1 1 1 0 0
                    0 0 0 1 0"
            result="color" />
        </filter>
        <filter id="c5">
          <feColorMatrix in="SourceGraphic"
            type="matrix"
            values="1 1 1 0 -0.1
                    1 1 1 0 -0.1
                    1 1 1 0 -0.1
                    0 0 0 1 0"
            result="color" />
        </filter>
        <filter id="c6">
          <feColorMatrix in="SourceGraphic"
            type="matrix"
            values="1 1 1 -0.1 0
                    1 1 1 -0.1 0
                    1 1 1 -0.1 0
                    0 0 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>Red and green channels set to 100%</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>Green channel set to 100%</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>Green and blue channels set to 100%</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>Red, green and blue channels set to 100%</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>Red, green and blue channels set to 100%, multiplier at -0.1</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>Red, green and blue channels set to 100%, alpha at -0.1</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);
}