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

223

19 октября 2019, 06:00

Есть прозрачная картинка с декоративным шрифтом при ховере на которую накладывается 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)); 
}

<img src="https://i.pinimg.com/originals/a4/63/34/a46334f2069f6e1c8ae40c95b8d16776.png" alt="">

Answer 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; 
}

<div class="filter-wrap"> 
  <img src="https://i.pinimg.com/originals/a4/63/34/a46334f2069f6e1c8ae40c95b8d16776.png" alt="" class="filter-wrap__image"> 
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560 211" width="560" height="211" preserveAspectRatio="xMidYMid slice" role="image" aria-label="Image Title" class="filter-wrap__svg"> 
    <defs> 
 
      <filter id="sofGlow" height="100%" width="100%" x="0" y="0"> 
        <feGaussianBlur stdDeviation="5" result="blurred" /> 
        <feFlood flood-color="#009af7" result="glowColor" /> 
        <feComposite in="glowColor" in2="blurred" operator="in" result="softGlow_colored" /> 
 
        <feMerge> 
          <feMergeNode in="softGlow_colored"/> 
          <feMergeNode in="SourceGraphic"/> 
        </feMerge> 
      </filter> 
 
    </defs>           
    <image width="100%" height="100%" filter="url(#sofGlow)" xlink:href="https://i.pinimg.com/originals/a4/63/34/a46334f2069f6e1c8ae40c95b8d16776.png"></image> 
  </svg> 
</div>