CSS - Filters - How to use grayscale

In Summary

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

[the-hare.gif]
The hare takes aim

CSS

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

Syntax grayscale(number | percent);

Note: CSS Filters are not supported by Internet Explorer.

Step by Step

Original Image
No filter
[the-hare.gif]
The hare takes aim

HTML

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

CSS

div.example {
}
grayscale
[the-hare.gif]
The hare takes aim

CSS

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

Syntax grayscale(number | percent);



Ads by Google


Ask a question, send a comment, or report a problem - click here to contact me.

© Richard McGrath