Bild-Hover Effekt ohne Nachladen

man muss erst mal das bild im normalen zustand und daneben das bild im hover zustand anlegen und abspeichern.

Beispiel:

wenn das bild im normalen zustand 325px breit ist, muss das fertige bild insgesamt 650px breit sein.

CSS-Code:

a#header {
  /* bild im normalen zustand */
  display: block;
  background: url('pfad/zum/bild.png') no-repeat left top;
  width: 325px /* muss angepasst werden */;
  text-indent: -9999px /* Text verstecken */;
  outline: 0; /* Rahmen im Firefox verstecken */
}

a#header:hover {
  /* bild im hover zustand */
  background-position: -325px 0 /* muss auch angepasst werden */;
}

und das war’s auch… ein beispiel findet ihr auf meiner homepage, wenn ihr mit der maus über das logo fährt