Hi,
Hintergrundbilder können ja nicht skaliert werden,
korrekt. Daher muß der Container passend dimensioniert werden. Und dies erledigt das enthaltene img browserübergreifend. Durch visibility:hidden wird es lediglich unichtbar, nimmt aber weiterhin denselben Raum in Anspruch.
Nur wo wird die Höhe der hover-prof-Bilder auf die 285 px gesetzt?
wie konntest Du nur » img { border:0; height: 285px; } « übersehen?
erst die blassen Bilder bekommen im img-Element die Höhe 285 px zugewiesen.
achso, doch nicht übersehen, nur noch nicht verstanden. ;-)
Wie ich schon sagte, bestimmt das img die Höhe von a und damit auch die Dimensionen des angezeigten Hintergrundbildes. Ausnahme ist » #foto a:hover { width:532px; } « - hier wird dem nur für moderne Browser (der IE würde dabei Probleme machen) display:block formatiertem a-Element eine Breite zugewiesen, weil das Hintergrundbild ja breiter als das img ist.
Diese Lösung ist übrigens auch deshalb wichtig, damit der Container erst bei a:hover die anderen überdeckt.
Im übrigen glaube ich, dass für "xhtml1-strict" einige schließende Etikette fehlen; aber das ist meine ganz persönliche Meinung ...
Ohje, Asche über mein Haupt. Danke für den Hinweis, ist gefixed. Ich hatte das mal so eben in Phase5 zusammengebastelt und nicht nachbearbeitet.
freundliche Grüße
Ingo