<h3>Blur Filter</h3>
<div class="wrap-images">
	<img class="responsive-image" src="https://res.cloudinary.com/dup54scz6/image/upload/v1555140728/responsive-demo/banner-720.jpg"/>
	<img class="responsive-image filter-blur" src="https://res.cloudinary.com/dup54scz6/image/upload/v1555140728/responsive-demo/banner-720.jpg"/>
</div>
<h3>Grayscale Filter</h3>
<div class="wrap-images">
	<img class="responsive-image" src="https://res.cloudinary.com/dup54scz6/image/upload/v1555140728/responsive-demo/banner-720.jpg"/>
	<img class="responsive-image filter-grayscale" src="https://res.cloudinary.com/dup54scz6/image/upload/v1555140728/responsive-demo/banner-720.jpg"/>
</div>
<h3>Sepia Filter</h3>
<div class="wrap-images">
	<img class="responsive-image" src="https://res.cloudinary.com/dup54scz6/image/upload/v1555140728/responsive-demo/banner-720.jpg"/>
	<img class="responsive-image filter-sepia" src="https://res.cloudinary.com/dup54scz6/image/upload/v1555140728/responsive-demo/banner-720.jpg"/>
</div>
<h3>Brightness Filter</h3>
<div class="wrap-images">
	<img class="responsive-image" src="https://res.cloudinary.com/dup54scz6/image/upload/v1555140728/responsive-demo/banner-720.jpg"/>
	<img class="responsive-image filter-brightness" src="https://res.cloudinary.com/dup54scz6/image/upload/v1555140728/responsive-demo/banner-720.jpg"/>
</div>
<h3>Contrast Filter</h3>
<div class="wrap-images">
	<img class="responsive-image" src="https://res.cloudinary.com/dup54scz6/image/upload/v1555140728/responsive-demo/banner-720.jpg"/>
	<img class="responsive-image filter-contrast" src="https://res.cloudinary.com/dup54scz6/image/upload/v1555140728/responsive-demo/banner-720.jpg"/>
</div>
<h3>Invert Filter</h3>
<div class="wrap-images">
	<img class="responsive-image" src="https://res.cloudinary.com/dup54scz6/image/upload/v1555140728/responsive-demo/banner-720.jpg"/>
	<img class="responsive-image filter-invert" src="https://res.cloudinary.com/dup54scz6/image/upload/v1555140728/responsive-demo/banner-720.jpg"/>
</div>
<h3>Saturate Filter</h3>
<div class="wrap-images">
	<img class="responsive-image" src="https://res.cloudinary.com/dup54scz6/image/upload/v1555140728/responsive-demo/banner-720.jpg"/>
	<img class="responsive-image filter-saturate" src="https://res.cloudinary.com/dup54scz6/image/upload/v1555140728/responsive-demo/banner-720.jpg"/>
</div>
<h3>Hue Rotate Filter</h3>
<div class="wrap-images">
	<img class="responsive-image" src="https://res.cloudinary.com/dup54scz6/image/upload/v1555140728/responsive-demo/banner-720.jpg"/>
	<img class="responsive-image filter-hue-rotate" src="https://res.cloudinary.com/dup54scz6/image/upload/v1555140728/responsive-demo/banner-720.jpg"/>
</div>
<h3>Multiple Filters - Saturate and Blur</h3>
<div class="wrap-images">
	<img class="responsive-image" src="https://res.cloudinary.com/dup54scz6/image/upload/v1555140728/responsive-demo/banner-720.jpg"/>
	<img class="responsive-image filter-saturate-blur" src="https://res.cloudinary.com/dup54scz6/image/upload/v1555140728/responsive-demo/banner-720.jpg"/>
</div>
.responsive-image {
	width: 98%;
	margin: 1em 1%;
	float: left;
}

@media(min-width: 640px) {

	.responsive-image {
		width: 48%;
	}
}

/* Gaussian Blur */
.filter-blur {
  filter: blur( 3px );
  -webkit-filter: blur( 3px );
}

/* Grayscale */
.filter-grayscale {
  filter: grayscale( 50% );
  -webkit-filter: blur( 50% );
}

/* Sepia */
.filter-sepia {
  filter: sepia( 50% );
  -webkit-filter: sepia( 50% );
}

/* Brightness */
.filter-brightness {
  filter: brightness( 150% );
  -webkit-filter: brightness( 150% );
}

/* Contrast */
.filter-contrast {
  filter: contrast( 150% );
  -webkit-filter: contrast( 150% );
}

/* Invert */
.filter-invert {
  filter: invert( 90% );
  -webkit-filter: invert( 90% );
}

/* Saturate */
.filter-saturate {
  filter: saturate( 50% );
  -webkit-filter: saturate( 50% );
}

/* Hue Rotate */
.filter-hue-rotate {
  filter: hue-rotate( 180deg );
  -webkit-filter: hue-rotate( 180deg );
}

/* Saturate & Blur */
.filter-saturate-blur {
  filter: saturate( 50% ) blur( 3px );
  -webkit-filter: saturate( 50% ) blur( 3px );
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.