Bild-Hover-Effekt

09.03.2008

Aus eins mach zwei: Bild-Hover-Effekt

In folgendem Beispiel wird ein Hover-Effekt für eine Grafik beschrieben, die man - falls gewünscht - auch noch verlinken kann.
Hier das vorweggenommene Ergebnis (bitte mit der Maus drüberfahren):

Was so aussieht, als würden hier zwei unterschiedliche Grafiken verwendet, ist in Wirklichkeit ein einheitliches Bild, das mit einem Grafikprogramm aus zwei Teilen zusammengefügt wurde. Es handelt sich also um eine Grafikdatei, die so aussieht (zur besseren Verdeutlichung wurde die Gesamtgrafik umrandet):

Tor

Der Hover-Effekt besteht darin, dass sich das Bild um seine hälftige Höhe nach oben "verschiebt": Der obere Bildteil (schwarz-weiß) verschwindet, während der untere Bildteil (farbig) in Erscheinung tritt. Um dies zu erreichen, benötigen wir drei unterschiedliche CSS-Klassen:

.foto-link
{
width: 290px;
height: 190px;
display: block;
margin: 0 auto;
}

.foto1
{
background: url(tor.jpg) no-repeat;
}

.foto-link:hover
{
background-position: 0 -190px;
}

Die verwendete Grafik mit dem "Doppeltor" (zusammengesetztes Schwarz-Weiß- und Farbfoto) ist 290px breit und 380px hoch.
Bei der Klasse .foto link verwenden wir als Höhe jedoch lediglich den hälftigen Wert, also 190px. Schließlich soll immer nur ein Teil des Bildes angezeigt werden und das ist im Normalzustand der obere Bildteil. Das display: block; dient dazu, den Link als Blockelement darzustellen und ihm somit einen Breiten- und Höhenwert zuordnen zu können. Mit margin: 0 auto; wird das Bild zentriert. Man kann das Ganze jedoch auch mit anderen Werten passend in die Homepage einfügen.

Die Klasse foto1 beinhaltet die verwendete Hintergrundgrafik. Das no-repeat verhindert, dass sich die Grafik wiederholt (kachelt). Diese Angabe ist nicht erforderlich, wenn Höhen und Breitenwerte bereits auf das Bild abgestimmt sind.

Für die "Verschiebung des Bildes" nach oben sorgt die Klasse foto-link:hover. Der erste Wert "0" bezieht sich auf den horizontalen Abstand der Hintergrundgrafik. Dieser soll sich nicht ändern.
Die -190px bedeuten, dass das Bild einen negativen Abstand nach oben hat. Damit verschiebt es sich um 190px (dem hälftigen Wert der Gesamtgrafik) nach oben. Es verschwindet der obere Bildteil (also der schwarz-weiß-Fototeil des Tores) aus der "Bildfläche". Und darin liegt der besondere Hover-Effekt dieser Doppelgrafik.

Im HTML-Teil fügen wir nun noch einen Link ein, der beide CSS-Klassen (".foto-link" und "foto1") beinhaltet:

Soll auf eine Zielseite verlinkt werden, so ist die Raute (#) durch den entsprechenden Pfad zu dieser Seite zu ersetzen.
Werden mehrere (gleichgroße) Grafiken verwendet, sind weitere Klassen "foto2", "foto3" usw. zu bilden, denen entsprechende Hintergrundgrafiken zugewiesen werden.

Dieser "Trick" kann sehr kreativ eingesetzt werden: Unterschiedliche Farbeffekte wie im Beispiel, zwei Portraits einer Person in jungen und älteren Jahren, Tag- und Nachtaufnahme eines Motivs, aber auch Hover-Buttons für ein Menue - eurer Kreativität sind keine Grenzen gesetzt.

nach oben