There is a transparent picture with a decorative font with a hover on which filter applied with the drop-shadow property.

How to apply the similar effect in ie11 ?

Code

 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="">

    1 answer 1

    Alternatively, you can use svg filters , support gives a green color .

    Below in the example, I superimposed img and svg with the filter on each other, so that when hover e, smoothly show the filter through opacity and transition. I haven't come up with another option yet)

     .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>

    • 2
      Yes, this is the only way to paint svg transferred to HTML using <img> , just like for svg in base64 format - only with the help of filters (+) - Alexandr_TT