однако, ie11 его не поддерживает. Есть ли какой-то костыль, который может решить задачу через CSS? Вариант обесцветить картину изначально не подходит - она должна приобретать цветность при наведении. Делать вариант с двумя картинками и менять одну на другую также не желательно.
можно применить jquery.gray.js
это по сути готовый компонент, у него обычный css с фильтрами и прочим, как у вас. А ie10+ он детектит встроенным модернайзером и генерит svg. всего 6 кб
ну тогда руками делайте экстра разметку и вкрячивайте туда svg (как - загугливаете ie10 grayscale)
эта либо собсно это и делает - детектит и вкрячивает.
