Hover-Effekt für nicht-quadratische, transparente Symbolbild

Question

wie Sie bei Jsfiddle sehen, obwohl ich nicht drinnen Bild eingeben, beginnt es zu schweben Effekt. Ich denke, es sieht mein Bild als Quadrat. Wie kann ich das lösen?

nicht: es gibt ein Geschenksymbol bei App.

<img id="image" src="http://i.hizliresim.com/kvAl3v.png" ></img> 

img:hover { 
    -webkit-filter: drop-shadow(1px 1px 0 black) 
       drop-shadow(-1px -1px 0 black); 
    filter: drop-shadow(1px 1px 0 black) 
     drop-shadow(-1px -1px 0 black); 
} 

https://jsfiddle.net/hLtbgzg6/

Answer 1

Wie in den Kommentaren erwähnt, wird immer das img-Element als Block durch den Browser zu sehen, wenn Ihr Hover CSS verarbeiten.

Aber brauchen Sie das wirklich genau? Wenn Sie das wirklich wirklich tun, dann sollten Sie den Bereich http://www.w3schools.com/tags/tag_map.asp mit einem Mouseover-Ereignis kombinieren, das Ihrem Bild eine neue Klasse (z. B. hovered) zuweisen würde. Fügen Sie dann den Filter CSS zu dieser Klasse hinzu.

img.hovered { 
-webkit-filter: drop-shadow(1px 1px 0 black) 
drop-shadow(-1px -1px 0 black); 
filter: drop-shadow(1px 1px 0 black) 
drop-shadow(-1px -1px 0 black); 
} 

Beachten Sie, dass das schließende Tag <\img> Elemente brauchen nicht für img ist diese ungültig HTML.