SVGイメージホバーに影を付ける

Question

透明なTwitterアイコンがSVGとして保存されています。 私はこのようなimgタグとして追加し、リンクタグでラップしたら： ボックスシャドウ：

<a href="#"><img src="http://imgh.us/twitter_25.svg" width="300"></a> 

が、私はそれをホバー効果を与えたい10pxの10pxの5pxの＃888888;

しかし、画像は白い背景で表示され、ホバー効果は白い背景領域にも適用されるという問題があります。

a:hover { 
 
    box-shadow: 10px 10px 5px #888888; 
 
}

<a href="#"> 
 
    <img src="http://imgh.us/twitter_25.svg" width="300"> 
 
</a>

Answer 1

多分そう？

a img { 
 
     border-radius: 50%; 
 
     display: block; 
 
     border: none; 
 
} 
 

 
a:hover img{ 
 
    box-shadow: 10px 10px 5px #888888; 
 
}

<a href="#"><img src="http://imgh.us/twitter_25.svg" width="300"></a>

Answer 2

おそらく、ドロップシャドウは良いかもしれない...

a:hover img { 
 
    filter: drop-shadow(10px 10px 5px #888); 
 
}

<a href="#"> 
 
    <img src="http://imgh.us/twitter_25.svg" width="200"> 
 
</a>