CSS drop-shadow on hover not removing completely on mouse out using Chrome

Question

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:

This is the image with the drop-shadow:

And this is the image after mouse leaves:

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!

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

Answer 2

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