Tutorial: CSS — Hover mit verlinkten Bildern
Hover-Effekte mit einem Hintergrund-Bild lassen sich einfach finden. Allerdings brauche ich für meine Anwendung kein Hintergrund-Bild, sondern ein einfaches, eingebundenes Bild, da ich nicht für jedes Mitglied ein eigenes Hintergrund-Bild (inklusive eigener #id etc.) anlegen möchte.Was tun? Zuerst einmal der HTML-Code:
<div class="memberarea">
<a href="#">
<img title="Mr. X" src=”das_bild.jpg” alt=”Mr. X" />
</a>
</div>
Wie man sieht, ist das Bild im Link enthalten, der Link in einem umgebenden div. Das eingebundene Bild enthält bereits die beiden gewünschten Zustände . Ohne CSS sähe das Ergebnis noch recht trostlos aus.
Kommen wir also zum CSS-Teil:
div.memberarea {
width: 210px;
height: 200px;
overflow: hidden;
}
div.memberarea a {
text-decoration: none;
display: block;
width: 420px;
}
div.memberarea a img {
border: 0;
}
div.memberarea a:hover {
margin-left: -210px;
}
Zuerst wird dem umgebenden div eine feste Weite (die Hälfte der Bild-Breite) sowie eine feste Höhe zugewiesen (die Höhe des Bildes). Die Angabe overflow: hidden bewirkt, dass nur die linke Bild-Hälfte angezeigt wird.
Nun wird das Link-Element bearbeitet: Das Unterstreichen des Links wird unterbunden und ganz wichtig: Der Link wird zum Block-Element gemacht. Diesem Block-Element kann ich dann eine entsprechende (nämlich die Bild-) Breite geben.
Dem Bild-Element wird der Rahmen genommen, sieht nun mal schöner aus & verhindert kleine Pixel-Fehler, die durch einen Rahmen entstehen könnten.
Die eigentliche Hover-Action findet im letzten Teil statt: Durch die negative Verschiebung des Links (der sich als Block-Element verschieben lässt) erscheint nun im div der rechte Teil des Bildes. Fertig.
(Vielleicht gibt es ein ähnliches Tutorial schon irgendwo, ich konnte allerdings auf die Schnelle keins finden. Browser-Kompatibilität wurde ebenso nicht getestet, mit FireFox sowie Safari & Mac OS X funktionierts. Windows-Browser kann ich leider gerade nicht testen 
Was macht der IE? )