Hover image effect

Question

I have a title bar the top of my page which is colored red. I have two links in the page for Facebook and Twitter. When I roll my mouse over the image the background turns white to indicated that it has been highlighted. Included in the link is an image of the Facebook and Twitter symbols which both have white backgrounds. The background color of the icons is white which obviously makes the background white on the webpage.
I have tried changing the background to red but the when the link is hovered over it stays red. I have tried a rollover image but when I hover over the link the effect iv given it is to gradually change color from red to which and the roll over image instantly snaps to the new image. Is there a way to make the image slowly change in sync with the hover change?

This is my HTML for the social media links:

<div class="SocialMedia">
  <ul>
    <li><img src="../Images/facebook.png" width="20" height="20"><a href="https://www.facebook.com/tokyo.corner.3?fref=ts" target="_blank"> Facebook </a></li>
    <li><img src="../Images/Twitter.jpg" width="20" height="20"><a href="https://twitter.com/TokyoCorner" target="_blank"> Twitter </a></li>
  </ul>
</div><!--Social Media--> 

This is my CSS

#Wrapper .TitleBar .SocialMedia {
  position: absolute;
  left: 445px;
  top: -3px;
  height: 51px;
  width: 896px; 
}

#Wrapper .TitleBar .SocialMedia ul{
  list-style-type:none; 
}

#Wrapper .TitleBar .SocialMedia ul li {
  display:inline;
  padding:10px;
  margin:0px;
  float:right;
}
#Wrapper .TitleBar .SocialMedia ul li a {
  font-family:Verdana, Arial, Helvetica, sans-serif;
  color:#FFF;
  text-decoration:none;
  height:50px;
  width:208px;
  text-shadow:1px 1px 1px #000;
}
#Wrapper .TitleBar .SocialMedia ul li:hover {
  background:#FFF;
  color:#000000;
  -webkit-transition:all 0.3s linear;
}
#Wrapper .TitleBar .SocialMedia ul li:hover a {
  color:#000000;
  text-shadow:1px 1px 1px #000;

}
 #Wrapper .TitleBar .SocialMedia ul li a:hover {
  color:#000;
  text-shadow:1px 1px 1px #000; 
}
#Wrapper .TitleBar .SocialMedia ul:hover {
  color:#000;
}

Answer 1

Your question isn't very clear but I believe that here's your answer ;)
http://css-tricks.com/fade-image-within-sprite/

As for your code, you have declared the "transition" rule in the wrong place. You should declare it in these selectors, and not in the ":hover" ones.

#Wrapper .TitleBar .SocialMedia ul li {...}
#Wrapper .TitleBar .SocialMedia ul li a {...}

Answer 2

I am sorry but i couldn't get your question properly but i think you can do this by using jquery:-

<img src="../Images/facebook.png" width="20" height="20" id="fb">
<img src="../Images/Twitter.jpg" width="20" height="20" id="tw">

and in jquery:-

$(document).ready(function() {
$('#fb').hover(function(){

$('#Wrapper').css('background-color','whatever u want to');
},
function(){
$('#wrapper').css('background-color','to original color');
});
});

similarly for twitter.

Do not forget to include the jquery file:-

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

Answer 3

The best way to do this is with jQuery Animate . It allows you to control the speed/duration of an effect on an element which you can run on hover .

Here is an article explaining the method: http://bavotasan.com/2009/creating-a-jquery-mouseover-fade-effect/