I will not recommend you to use just css and html to gray scale an image for cross browser support, the only way to be 100% sure that your grayscale image will be gray scale on all browser including there previous and upcoming versions is to use some kind of server side code.
But if you don't have any other option but to use only html and css. then this is the way, will work on all major browsers.
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
/* Disable grayscale on hover */