Bildbeschreibung mit CSS gestalten

Wie in dieser Anleitung Tooltipps mit CSS erstellen, soll es hier um Bildbeschreibungen gehen, die mit :hover und :focus über das Bild eingeblendet werden können.

Da ja alles schön semantisch sein soll, verpacken wir das Bild mit der Beschreibung in einer Definitionsliste dl. Um die Fokusfunktionalität zu gewährleisten, wird die Beschreibung mit einem A-Element umschlossen. Mit diesem Link könnt ihr aber auch auf eine ausführliche Bildbeschreibung, oder aber auf das Originalbild verweisen.

Wer eine ausführliche Bildbeschreibung anbieten möchte, der kann zudem noch im IMG-Element das Attribut longdesc="PfadZurBeschreibung" notieren. Eine ausführliche Beschreibung findet ihr unter http://de.selfhtml.org/html/grafiken/einbinden.htm#langbeschreibung.

HTML Markup

<dl>
 <dt><img src="/CSS-Anleitungen/Bildbeschreibung-mit-CSS/loewe.jpg" alt="Wachsame Löwin" width="500" height="375" /></dt>
 <dd><a href="#ZurAusführlichenBeschreibung">Wachsame Löwin aus dem Tierpark Berlin 2010... weiter</a></dd>
</dl>

CSS Style-Angaben

dt , dl , dd {
 padding:0;
 margin:0;
}

dt a , dt img {
 display:block;
}

Um keine bösen Überraschungen zu erleben, werden die Außen- und Innenabstände von dl , dt , dd auf null gesetzt. Weiterhin werden das A und IMG Element zum Blockelement befördert.

dl {
 margin:20px;
 position:relative;
 width:500px;
}

Hier ist die wichtigste Anweisung position:relative. Somit lässt sich später das A-Element innerhalb von dl absolut positionieren. Die Angabe width:500px entspricht der Bildbreite. Alternativ könnt ihr aber auch float:left verwenden.

dd a {
 margin:0;
 padding:5px;
 position:absolute;
 left:-99999px;
 bottom:0;
 color:#fff;
 text-align:center;
 text-decoration:none;
}

Diese Anweisungen sorgen für das Verschwinden der Bildbeschreibung. Damit auch Sehbehinderte die Bildbeschreibung genießen können, verzichten wir auf display:none etc. und verschieben stattdessen das gesamte A-Element mit position:absolute und left:-99999px aus dem sichtbaren Bereich. Alle anderen Anweisungen sollten selbsterklärend sein.

dl:hover dd a , dl dd a:focus {
 left:0;
 right:0;
 outline: none; 
 background:rgba(0 , 0 , 0 , .3);
}

dd a:hover {
 text-decoration:underline;
}

Mit left:0 wird die Bildbeschreibung beim Hovern wieder in den sichtbaren Bereich geschoben. Damit sich das A-Element über der gesamten Breite erstreckt, wird noch die Angabe right:0 benötigt.

Übrigens. Wer seine Beschreibung am oberen Bildrand haben möchte, der muss im dd a das bottom:0 durch top:0 ersetzen. Oder beide Angaben um das gesamte Bild zu füllen.

Das war's auch schon wieder und hier ist nun das Endergebnis.

Wachsame Löwin
Wachsame Löwin aus dem Tierpark Berlin 2010... weiter

erstellt am 11.10.2012

nach oben