In this tutorial, I’m going to show you how-to convert images to sepia using CSS3 filter property’s sepia function.Converting the image to sepia leaves your image with an effect similar to the aging of old photographs and of older photographs chemically treated either for visual effect or for archival purposes.

The Results

Not sepia:

Sepia:

The HTML and CSS

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

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

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

Here is the CSS you would use to convert the image to sepia:

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

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

img.sepia:hover {
    filter: sepia(100%);
    -webkit-filter: sepia(100%);
    -moz-filter: sepia(100%);
    -o-filter: sepia(100%);
    -ms-filter: sepia(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.sepia
{
filter: sepia(100%);
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-o-filter: sepia(100%);
-ms-filter: sepia(100%);
}