Himas Rafeek
Posted on: 1 year ago
CSS

Convert an image to grayscale in HTML/CSS

cross-browser solution


                                          /* * First create a file filters.svg with the following contents         */ img {
    filter: url("filters.svg#grayscale");
    /* Firefox 3.5+ */    filter: gray;
    /* IE5+ */    -webkit-filter: grayscale(1);
    /* Webkit Nightlies & Chrome Canary */
}
 img:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}