Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

News

CSS3-Transform: Wir peppen eure Bildunterschriften mit ein bisschen Magie auf

(Grafik: Shutterstock)

Bildunterschriften auf Webseiten müssen nicht immer langweilig sein. Wir zeigen euch, wir ihr mit etwas CSS-Magic und einer kleinen Lib langweilige Bildunterschriften aufpeppt.

Bildunterschriften sollen inhaltlich dem Bild einen Mehrwert bieten und den Fokus auf einen gewünschten Punkt lenken. Dabei sind die Bildunterschriften meist direkt unter dem Bild zu finden. Das kann jedoch bei manchen Layouts nicht gewünscht sein – deshalb gucken wir uns heute an, wie man das technisch anders lösen kann.

Transformation eingeleitet: Warping in 3 ... 2 ... 1 ... jetzt!

Flip-Animationen der Bildunterschriften. (Grafik: Imagehover)
Flip-Animationen der Bildunterschriften. (Grafik: Imagehover)

Die Bildunterschriften können als sogenannten HTML-Figcaption definiert werden. Die Figcaption wird innerhalb des Figure-Elements eingeordnet und bietet somit auch einen Mehrwert der Semantik.

Damit wir direkt loslegen können, müssen wir die HTML-Struktur folgendermaßen anpassen oder einbauen:

<figure class="imghvr-fade">
<img src="#" alt="Bild">
<figcaption>Bildunterschrift</figcaption>
</figure>

Jetzt fehlen nur noch der CSS-Style und die passende Animation. Dafür müssen wir die CSS-Lib einbinden, die ihr direkt von GitHub runterladen könnt:

<link rel="stylesheet" href="css/imagehover.min.css">

Sobald ihr die Datei eingebunden habt, wird eure Bildunterschrift animiert. Da wir schon im Quellcode die Klasse imghvr-fade vergeben haben, erhalten wir direkt eine Animation. Wem der Fade-Effekt zu langweilig ist, kann sich auf der offiziellen Webseite aus 40 weiteren Effekten einen passenden aussuchen. Dafür muss nur die CSS-Klasse ausgetauscht werden.

Bildunterschriften mit CSS-Transform

Die CSS-Lib ist klein, erfüllt ihre Aufgabe aber glänzend. Wem es sauer aufstößt, für Kleinigkeiten jeweils immer eine neue CSS-Lib einzubinden, kann das Projekt Imagehover.io auch als Best-Practice-Vorlage benutzen. Die Idee und die Umsetzung sind gut und lassen eure Bildunterschriften mit Animation und Semantik in neuem Glanz erstrahlen.

Wenn ihr noch interessante CSS-Libs kennt, schreibt sie in die Kommentare!

Bitte beachte unsere Community-Richtlinien

Eine Reaktion
wpGO

Imagehover.io ist klasse!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst