0

I am trying to apply drop shadow to an Image using the code below: reference - https://stackoverflow.com/a/12921987/1124993

.shadowed {
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="drop-shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="1.3"/>
        <feOffset dx="4" dy="4" result="offsetblur"/>
        <feFlood flood-color="rgba(0,0,0,0.5)"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
</svg>

<div class="shadowed">

<img src="http://indianartzone.cubereach.com/pub/media/catalog/product/p/o/por003.jpg" 
style="width:100%;" /></div>

You can see the effect here - https://jsfiddle.net/d8wfw8va/15/

Joshi
  • 2,730
  • 5
  • 36
  • 62

1 Answers1

2

I don't believe DXImage is supported anymore. See Microsoft Compatibility.

I would reccomend you use box-shadow instead which has Edge support and no prefixes needed. See: CanIUse - box-shadow

HTML:

<img src="http://indianartzone.cubereach.com/pub/media/catalog/product/p/o/por003.jpg" class="shadow" />

CSS:

.shadow {
  box-shadow: 12px 12px 25px rgba(0,0,0,0.5);
}
Stephen Tvedt
  • 326
  • 1
  • 5