Hover Grafik in den Vordergrund

Hallo,

und zwar habe ich vor, meine Buttons ein wenig hervorzuheben. Dazu möchte ich gerne, sobald man mit der Maus drüber fährt, dass eine Grafik eingeblendet wird und genau über dem jeweiligen Button liegt.

.SidebarSocial a img{ height: 75px;}
.SidebarSocial a img, .SidebarSocial a:visited img { width: 64px; height: 64px; }
.SidebarSocial a:hover img { background: url(images/social/Hover.png);}

Nun füge ich die Grafik aber lediglich in den Hintergrund ein. Kann mir jemand sagen, wie ich diese in den Vordergrund bekomme?

Beste Grüße, Skatze

Das Problem ist, dass ich in der .php die Buttons direkt eingefügt habe, da das alles unterschiedliche sind.

In der .css versuche ich nun eine Grafik darüber zu legen, sobald ich mit der Maus rüberfahre, als ob der Knopf gedrückt wird also.

Habe schon mit z-index probiert, aber hab das irgendwie nicht hinbekommen..

Ich habe mal geschaut aber nicht wirklich was finden können...

Also ich hab die Thematik jetzt begriffen und auch fertiggestellt. Für alle die es interessiert:

Ich habe den CSS-Code jetzt auf das a-Tag ausgelagert und arbeite mit ID's, um jeweils die gleiche Formatierung zu haben, aber immer ein unterschiedliches Bild.

CSS

.socialbutton{ 
  display: inline-block;
  height: 64px;
  line-height: 0;
  text-indent: -9999px;
  width: 64px;
}


#link1 {background: url(images/social/facebook.png);}
#link2 {background: url(images/social/google.png);}
#link3 {background: url(images/social/twitter.png);}
#link4 {background: url(images/social/rss.png);}


#link1:hover {background: url(images/social/facebook-hover.png);}
#link2:hover {background: url(images/social/google-hover.png);}
#link3:hover {background: url(images/social/twitter-hover.png);}
#link4:hover {background: url(images/social/rss-hover.png);}
}

HTML

<a class="socialbutton" id="link1" target="_blank" title=geld-und-welt.de Facebook" href="http://www.facebook.com/GeldundWeltde">Button1</a>

Beste Grüße, Skatze