I have social bar on my website which indcludes facebook, twitter, google+ and rss.

**It looks like this**

![enter image description here](https://i.stack.imgur.com/tKVnE.jpg)

On mouse hover, i want the circle around image to change color to blue. Somehow i always end up failing and the whole background changes to blue.

**MY HTML CODE**

```
<div class="social-top-nav">
    <ul>
        <li><a href="#"><img src="images/facebook.png" title="facebook" /></a></li>
        <li><a href="#"><img src="images/twitter.png" title="twitter" /></a></li>
        <li><a href="#"><img src="images/google.png" title="google+" /></a></li>
        <li><a href="#"><img src="images/feed.png" title="rss" /></a></li>
    </ul>
</div>

```

**My CSS code**

```
.social-top-nav{
    float:right;
    margin-top: 11px;
}

.social-top-nav ul li{
    display:inline-block;
}
.social-top-nav ul li a{
    display:block;
}

.social-top-nav ul li a img:hover{
    opacity: 0.8;
    -moz-box-shadow: 0 0 10px #ccc; 
    -webkit-box-shadow: 0 0 10px #ccc; 
    box-shadow: 0 0 10px #ccc; 
}

```

**Can you guys help me fix the code? I'll appreciate any input.**

**knitevision**

![enter image description here](https://i.stack.imgur.com/4VaMb.jpg)