CSS - Filters - How to combine

In Summary

This example demonstrates using CSS Filters on the parent div, to transform all contained elements, including border, image, background color and text.

How to combine Contrast & Grayscale.

CSS

div.example {
    filter: contrast(150%) grayscale(100%);
}

Syntax filter: filter-function(params) filter-function(params);

Step by Step

Original Image
No filter

HTML

Simplified

<div class="example">
    <figure>
        <img src="images/the-hare.gif" />
        <figcaption>The hare takes aim</figcaption>
    </figure>
</div>

CSS

div.example {
}

contrast

CSS

div.example {
    filter: contrast(150%);
}

Syntax contrast(number | percent);

grayscale

CSS

div.example {
    filter: grayscale(100%);
}

Syntax grayscale(number | percent);

Combined

Contrast +
Grayscale

CSS

div.example {
    filter: contrast(150%) grayscale(100%);
}

Syntax filter: filter-function(params) filter-function(params);