Vlidurno Vlidurno - 3 months ago 14
CSS Question

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>




Answer

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>

Comments