<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);
}


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.