Herzlichen Glückwunsch! Mit WordPress haben Sie das erfolgreichste CMS installiert, dass sich ohne viel Kenntnisse des Anwenders in nur 8 Minuten fast von selbst installiert.

Kann man das auch individuell mit CSS gestalten? - Ja, klar!

Ausgangspunkt war die Frage, ob, man ein „Textelement über Bild positionieren“ könne.^[1]

Der schnelle Weg

Um WordPress individuell anzupassen, können sie direkt im Blockeditor ihr HTML mit Klassen versehen und für diese dann CSS-Festlegungen deklarieren.^[2]

Design → Anpassen → Zusätzliches CSS:

Der bessere Weg

Es gibt in Wordpress eine Vielzahl von Stylesheets und daneben komplette Themes, die neben Speziellen Seiten-Templates wieder viele Stylesheets mitbringen.

Damit dort vorgenommene Änderungen bei einer automatischen Aktualisierung nicht überschrieben werden, empfiehlt es sich ein eigenes Child Theme zu definieren.

→ WordPress/Child Theme einrichten

Und wie überlagert man nun ein Bild mit einem halbtransparentem Text?

Wenn man Text über das Bild legen will, kann man nicht vom aktuellen Standpunkt am Monitor ausgehen.

Hier muss der Bild-Container mit position: relativezum Bezugspunkt werden, in dem dann Bild und Beschreibungstext absolut positioniert werden.

Dann kann die Bildunterschrift entsprechend oben oder unten „angeklebt werden“:

#gallery figure {
  position: relative;
}

figure img {
  width: 100%;
  display: block;
} 

#gallery > figure > figcaption {
  position: absolute;
  bottom: 0;
}

→ Bilder im Internet/Einbindung mit img