Как подключить filter: grayscale в ie11?

Question

[Евгений Мягких]

Добрый день, коллеги!

Есть контентное изображение, на которое надо положить фильтр грейскейл. Код

.popular-brands-list-item img {
-webkit-filter: grayscale(1);
filter: grayscale(1);
-ms-filter: progid: DXImageTransform.Microsoft.grayscale(1);
opacity: 0.2;
}

однако, ie11 его не поддерживает. Есть ли какой-то костыль, который может решить задачу через CSS? Вариант обесцветить картину изначально не подходит - она должна приобретать цветность при наведении. Делать вариант с двумя картинками и менять одну на другую также не желательно.

Заранее спасибо за ответ!

Answer 1

[cssfish]

можно применить jquery.gray.js
это по сути готовый компонент, у него обычный css с фильтрами и прочим, как у вас. А ie10+ он детектит встроенным модернайзером и генерит svg. всего 6 кб

Comments

[Евгений Мягких]

спасибо! Увы, нужно и без подключения библиотек... Таковы суровые требования на интенсиве )

[cssfish]

ну тогда руками делайте экстра разметку и вкрячивайте туда svg (как - загугливаете ie10 grayscale)
эта либо собсно это и делает - детектит и вкрячивает.

[Antony Bark]

cssfish Спасибо! Доброе решение