0

I have setup css sprites for social icons on the footer of following page:

http://www.javaexperience.com/

The problem is that I want to change background color on hover but then the image gets hidden. Following is the CSS code for the 4 social icons:

.social-bookmarks {list-style-type: none !important;margin: 0 !important;padding: 0 !important;}
.social-bookmarks li {display: inline !important;float: left !important;margin-bottom: 2px !important;margin-right: 2px !important;padding: 0 !important;width: auto !important;}
.social-bookmarks a {-moz-transition: all 0.3s ease 0s;display: block !important;float: left !important;height: 40px !important;margin: 0 !important;padding: 0 !important;text-indent: -9999px !important;width: 40px !important;background-color: transparent;}
.social-bookmarks .facebook a {background: url("/wp-content/themes/max/images/social.png") no-repeat scroll 0 0 transparent;height:40px;width:40px;background-position:0px 0;}
.social-bookmarks .facebook a:hover {background-color: #3B5998;}
.social-bookmarks .google a {background: url("/wp-content/themes/max/images/social.png") no-repeat scroll 0 0 transparent;height:40px;width:40px;background-position:-40px 0;}
.social-bookmarks .google a:hover {background-color: #DD4B39;}
.social-bookmarks .rss a {background: url("/wp-content/themes/max/images/social.png") no-repeat scroll 0 0 transparent;height:40px;width:40px;background-position:-80px 0;}
.social-bookmarks .rss a:hover {background-color: #FE9900;}
.social-bookmarks .twitter a {background: url("/wp-content/themes/max/images/social.png") no-repeat scroll 0 0 transparent;height:40px;width:40px;background-position:-120px 0;}
.social-bookmarks .twitter a:hover {background-color: #48C4D2;}

As you can see I am trying changing the background color on hover but nothing is happening. Any idea on how to fix it?

Piyush-Ask Any Difference
  • 4,294
  • 5
  • 46
  • 92

3 Answers3

1

Your PNG's don't have transparent backgrounds...they are solid white. Remove the white, save as transparent png, will make life a lot easier :)

Kayo
  • 702
  • 3
  • 10
1

The image/icon does not have a transparent background its self, so what ever color you put it won't show as the image is on top

So you need to update that image to have a transparentDemo of white background image background then it should work

tim.baker
  • 3,109
  • 6
  • 27
  • 51
0

Try this:

.social-bookmarks .facebook a {background: transparent url("/wp-content/themes/max/images/social.png") no-repeat 0 0;height:40px;width:40px;}

.social-bookmarks .facebook a:hover {background: #3B5998 url("/wp-content/themes/max/images/social.png") no-repeat 0 0;}
Billy Moat
  • 20,792
  • 7
  • 45
  • 37