Unser Ziel wird es sein, ein Bild mit einer Überschrift und einer Beschreibung zu versehen. Das Markup hierfür besteht aus einem Bild in einem Anchor-Element, gespickt mit einer Reihe von HTML5-Data-Attributen.

<a class="caption"
href="http://de.wikipedia.org/wiki/Hummeln"
data-title="Hummel"
data-description="Die Hummeln (Bombus) sind eine zu den Bienen [...]">
<img src="hummel.jpg" alt="Foto einer Hummel">
</a>

Mit data-title und data-description legen wir den Titel des Bildes und die dazugehörige Beschreibung fest. Die Werte dieser Attribute werden wir in den Pseudoelementen :before und :after verwenden können.

Wir fangen mit einer statischen Positionierung der Überschrift und Beschreibung an. Um den Titel und die Beschreibung direkt neben das Bild legen zu können, stylen wir zunächst das Anchor-Element.

.caption {
display: inline-block;
position: relative;
margin: 10px;
max-width:50%;
}
.caption img {
display:block;
max-width:100%;
}

Wir sorgen dafür, dass der Anchor und das darin liegende Bild maximal 50 Prozent des Bildschirms einnehmen und bereiten das Layout so für ein responsives Webdesign vor. Den Anchor positionieren wir relativ – das ist wichtig, da wir später die Überschrift und Beschreibung absolut und so relativ zum Anchor und nicht zum Body positioniert werden.

Als nächstes holen wir uns die Überschrift und Beschriftung aus den Data-Attributen heraus. Hierfür weisen wir den Content-Attributen der Pseudo-Elemente das jeweilige HTML5-Data-Attribut zu.

.caption:before {
content: attr(data-title);
}
.caption:after {
content: attr(data-description);
}

Titel und Beschreibung sollten nun ausgegeben werden. Für unser Beispiel können wir das Styling des Elements nochmal verfeinern, um sie neben dem Bild zu positionieren.

.caption::before,
.caption:after {
position: absolute;
left: 100%;
width: 90%;
margin: 0 0 0 10%;
font-weight: 300;
color: #89867e;
}
.caption:before {
content: attr(data-title);
top: 0;
height:20%;
font-size: 40px;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.caption:after {
content: attr(data-description);
top: 20%;
padding: 20px 10px 0px 0px;
font-size: 18px;
}

So sollte dann das Endergebnis aussehen:

Einige Browser, wie beispielsweise Google Chrome in der aktuellen Version, unterstützen das Animieren von Pseudo-Elementen, sodass wir mit CSS-Transitions coole Effekte erzielen können.

.caption:hover::after,
.caption:hover::before{
opacity:1;
}
.caption:before,
.caption:after {
position: absolute;
left: 100%;
width: 90%;
margin: 0 0 0 10%;
font-weight: 300;
color: #89867e;
opacity:0;
transition: opacity 1000ms ease-out;
}

Hierfür ergänzten wir unser Stylesheet um einen Hover-Zustand für die Pseudoelemente der Caption-Klasse und setzen die Opacity der Pseudoelemente im zuvor definierten Block auf 0. Außerdem ergänzen wir die Pseudoelemente um eine CSS-Transition für die opacity.

Als Ergebnis erhalten wir nur das Bild, das beim Mouse-Over um den Titel und die Beschriftung ergänzt wird.

Mit dieser Technik ergeben sich viele verschiedene Einsatzmöglichkeiten für die Entwicklung von Webseiten. Semantisches Markup sollte bei der Entwicklung dennoch immer bevorzugt werden. Trotzdem: Die Kombination aus HTML5-Data-Attributen und CSS3 ist ein zusätzlicher Weg, um interessante, interaktive Web-Projekte zu gestalten – und das ohne eine einzige Zeile JavaScript.