CSS - How to invert an image

You can invert an image (or any HTML element) using CSS filters.

In Summary

CSS

div.example {
    filter: invert(1);
}

Syntax invert(number | percent);

Note: CSS Filters are not supported by Internet Explorer.

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 {
}

invert

CSS

div.example {
    filter: invert(1);
}

Syntax invert(number | percent);