<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 );
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.