Как добавить свойство filter drop-shadow в ie11?

#css #css3 #svg #internet_explorer #filter

Есть прозрачная картинка с декоративным шрифтом при ховере на которую накладывается
filter со свойством drop-shadow.

Как применить аналогичный эффект в ie11 ?

Код


img:hover {
  filter: drop-shadow(0 0 0.5em #009af7) drop-shadow(0 0 0.2em rgba(255, 255, 255,
0.5));
  -webkit-filter: drop-shadow(0 0 0.5em #009af7) drop-shadow(0 0 0.2em rgba(255,
255, 255, 0.5));
}




    

Ответы

Ответ 1

Как вариант, можно использовать svg фильтры, поддержка дает зеленый цвет.  

Ниже в примере я наложил img и svg с фильтром друг на друга, чтобы при hoverе плавно
показывать фильтр через opacity и transition. Другого варианта я пока не придумал)



.filter-wrap {
  position: relative;
}
.filter-wrap:hover .filter-wrap__svg {
  opacity: 1;
}

.filter-wrap__image {
  position: relative;
  z-index: 2;
}

.filter-wrap__svg {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 200ms ease-out;
}