CODEWITHSUNDEEP
htmlcsssvg
Vlidurno
Vlidurno

Reputation: 95

Add shadow on SVG image hover

I have a transparent Twitter icon saved as SVG. Once i add it as img tag and wrap it in link tag like this:

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

I want to give it a hover effect: box-shadow: 10px 10px 5px #888888;

But, the problem is that the image shows with white background and the hover effect gets applied to white background area as well.

a:hover {
  box-shadow: 10px 10px 5px #888888;
}
<a href="#">
  <img src="http://imgh.us/twitter_25.svg" width="300">
</a>

Upvotes: 0

Views: 2005

Answers (2)

Paulie_D
Paulie_D

Reputation: 115046

Perhaps drop-shadow might be better...

a:hover img {
  filter: drop-shadow(10px 10px 5px #888);
}
<a href="#">
  <img src="http://imgh.us/twitter_25.svg" width="200">
</a>

Upvotes: 2

SVE
SVE

Reputation: 1655

maybe so?

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>

Upvotes: 3

Related Questions