1

I have a drop-shadow effect on hover in some transparent png's on my site, but the shadow is not removing completely when the mouse leaves the image (and also is not working at all in Safari and Firefox but that will be another question)

This is the original image:

original image

This is the image with the drop-shadow:

image with shadow

And this is the image after mouse leaves:

enter image description here

Here is the code: and a JSfiddle

CSS:

<style>
    img:hover {
       -webkit-filter: drop-shadow(5px 5px 5px #222); 
       filter: drop-shadow(5px 5px 5px #222);  
    }
</style>

HTML:

<img src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Triple-Spiral-4turns_green_transparent.png" width="150"/>

Thank you for the help!

yenssen
  • 1,171
  • 2
  • 23
  • 37

2 Answers2

1

demo - http://jsfiddle.net/victor_007/jqavcnLb/1/

adding a white shadow on normal state will fix it

img:hover {
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(5px 5px 5px #222);
}
img {
    -webkit-filter: drop-shadow(5px 5px 5px #ffffff);
    filter: drop-shadow(5px 5px 5px #ffffff);
}
Vitorino fernandes
  • 15,794
  • 3
  • 20
  • 39
  • This answer is correct and will be assisted by two more additions; namely, add padding to the image that is larger that the drop shadow to keep the rendered shadow from getting cut off. – russellmania Nov 21 '21 at 20:12
0

Not sure if this messes up your layout, but try adding padding:

<img src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Triple-Spiral-4turns_green_transparent.png" width="150" style="padding:10px"/>
Lys777
  • 426
  • 1
  • 3
  • 11
  • As for Safari & Firefox, here is a compatibility chart: https://developer.mozilla.org/en-US/docs/Web/CSS/filter?#Browser_compatibility. Compatible with Safari 6+ and FF 35+. The JSFiddle works in my Safari 7, but not my FF 31. – Lys777 Nov 14 '14 at 22:47