Cross-Browser Image Grayscale

Cross-Browser Image Grayscale

To apply grayscale or make your images desaturate in all Modern Browser like Firefox, Chrome, Opera, Safari on desktop and IOS you can use the following CSS code:

The code below is only 50% desaturate you can make it 100% if you want full grayscale in your image when hover.

You can also disable it by applying this code: