How to get "filter grayscale" for background-image to work in IE 11?

Question

css

Please share your working method.
I have my own background-image for each div. It is necessary that initially the image be black and white, and when you hover it becomes color.
Interested in working in IE11. Already tired of solving this.
Current CSS:

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: gray;
-webkit-filter: grayscale(100%);

This is the latest of many attempts to make the feature work.

Answer 1

"Filter" the background without touching the contents of the div? None, as far as I know.
Only if you make the background image and content separate nested elements, and then put the background under the bottom using z-index.