In this tutorial, I’m going to show you how-to invert colours of an image using CSS3 filter property’s invert function.Inverting the colours of an image leaves a nice effect, which many say is like a photo negative.

The Results

Not inverted:

Inverted:

The HTML and CSS

The invert function uses a percentage, from 0% to 100%; where 0% leaves the image unchanged and 100% leaves the image fully inverted.

Here is the HTML you would use to invert the image:

<img src="image.jpg" class="invert" />

Here is the CSS you would use to invert the image:

img.invert {
    filter: invert(100%);
    -webkit-filter: invert(100%);
    -moz-filter: invert(100%);
    -o-filter: invert(100%);
    -ms-filter: invert(100%);
}

You can also apply this effect when the image is hovered:

img.invert:hover {
    filter: invert(100%);
    -webkit-filter: invert(100%);
    -moz-filter: invert(100%);
    -o-filter: invert(100%);
    -ms-filter: invert(100%);
}

Also instead of using percentages 100%, you could use percentages as a decimal, so 100% would be 1; for 80%, you would use 0.8.

img.invert
{
filter: invert(100%);
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);
}