Wie wird so etwas umgesetzt?

[Gunnar Bittersmann]

@@Sturmverliebt:

nuqneH

Um das Bild über den Text zu legen benötige ich wohl das DIV

Ich würde den Text über das Bild legen. Dann brauchst du kein div. Außerdem hat deine Lösung den Nachteil, dass du von einer festen Höhe des Textfeldes ausgehst. Was ist, wenn der Text länger ist und mehr Zeilen beansprucht?

In meiner Lösung ist die Textbox so hoch wie es der Inhalt erfordert. Sie liegt über dem Bild und deren Höhe wird beim Hovern per 'clip' geändert. Per 'clip' deshalb, damit sich die Schrift nicht verschiebt.

Beim Verlassen des figure-Elements mit dem Mauszeiger erscheint die Unterschrift nicht sofort wieder, sondern gegen Ende der Transition-Zeit. Ich finde das aber nicht schlimm, im Gegenteil.

(Man könnte auch 'max-height' ändern. Dann wird sie Schrift mit der Textbox geschoben. Dann tritt die Verzögerung aber beim Hovern auf, was sich störend bemerkbar macht. Das lässt sich aber einsetzen, wenn die Unterschrift initial nicht zu sehen ist, sondern beim Hovern.)

Wozu das span?

Wie bekomme ich sonst zwei Zeilen Text in das <figcaption>? Außerdem soll der erste Text Fett sein und der darunter etwas kleiner, mein neuer Code sieht so aus

Die span sind völlig in Ordnung.

Qapla'