I currently have a social media bar on my website with icons for Facebook, Twitter, Google+, and RSS.
Here is how it looks:
When I hover over the icons, I want the circle around the image to change color to blue. However, every attempt I've made ends up changing the entire background 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;
}
Any suggestions on fixing this issue would be greatly appreciated!
Sincerely, knitevision