Add a:hover box-shadow to a picture link

Issue

I am Trying to add a box shadow a:hover to a facebook icon image. I thought this would be easy but as usual i was incorrect. I am using a child theme in wordpress as I only started a couple of months ago and thought it would be a easy way to start. I thought this may be causing the problem but then i found JSFiddle and was unable to add a box shadow there either.

Code from JSFiddle:

http://jsfiddle.net/6P2sB/

HTML

Example 1

<a href="..." target="_blank">
<img class="icon" src="..." alt="facebook icon" align="right" />
</a>

Example 2

<div class="icon">
<a href="..." target="_blank"><img src="..." alt="facebook icon" align="right" />
</a></div>

CSS

.icon {
text-align: right;
box-shadow: none ! important;
border-radius: 7px;
margin-left: 5px;
margin-top: -5px;
margin-right: 10px;
height: 45px;
width: 45px;
}

.icon a:hover {
border-radius: 7px;
box-shadow: 5px 5px 5px rgba(0, 255, 0, 0.1);
}

Any suggestions would be greatly apreciated. Cheers guys!

The link can also be seen at http://www.a2zenyoga.com/events/#link

Solution

You are applying the box-shadow on the anchor. But you need to apply that on img when someone hover over a. So, your code should looks like this -

.icon a:hover img {
    box-shadow: 5px 5px 5px rgba(0, 255, 0, 0.1);
}

Answered By - aniskhan001