GeneratePress: Klickbares Bild mit Text-Overlay erstellen

Eine Bildkarte soll komplett klickbar sein, auf dem Foto soll weißer Text liegen und die Schrift soll auf Desktop wie Smartphone proportional gut aussehen. Genau diese Aufgabe wurde im ursprünglichen GeneratePress-/GenerateBlocks-Verlauf sehr ausführlich durchgespielt – von der Textposition über Flexbox und clamp() bis zur Frage, wie der komplette Container zum Link wird.

Die sauberste Lösung ist heute: Bild als Container-Hintergrund, Text als normales Inhaltselement darüber, Overlay als eigene Ebene und der gesamte Container als Link. Dadurch musst du keinen separaten unsichtbaren Link über das Bild legen.

1. Die Grundstruktur

Für eine einzelne Bildkarte brauchst du:

  1. einen GenerateBlocks-Container,
  2. ein Hintergrundbild auf diesem Container,
  3. eine Headline oder einen Text im Container,
  4. optional einen dunklen Overlay,
  5. eine Link-URL für den Container.

Wenn mehrere Karten nebeneinander stehen sollen, kommen diese Container in ein Grid.

2. Das Bild als Hintergrund des Containers

Ein Hintergrundbild ist für diesen Anwendungsfall oft praktischer als ein normaler Bildblock. Der Text kann dann ohne zusätzliche absolute Positionierung direkt im selben Container liegen.

Wichtige Einstellungen:

  • Background Size: Cover
  • Background Position: Center oder motivabhängig
  • Background Repeat: No Repeat

3. Container mit einem stabilen Seitenverhältnis

Damit die Karten gleichmäßig aussehen, kannst du ein Seitenverhältnis festlegen:

.clickable-image-card {
    aspect-ratio: 4 / 3;
    position: relative;
    overflow: hidden;
}

Für quadratische Karten:

aspect-ratio: 1 / 1;

Damit musst du nicht für jede Bildschirmgröße eine feste Höhe definieren.

4. Text mit Flexbox positionieren

Im ursprünglichen Verlauf war Flexbox zunächst unklar. Vereinfacht gesagt: Flexbox ermöglicht, den Inhalt eines Containers sehr bequem horizontal und vertikal auszurichten.

Beispiel: Text unten links:

.clickable-image-card {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}

Text zentriert:

align-items: center;
justify-content: center;

Text oben links:

align-items: flex-start;
justify-content: flex-start;

5. Padding bestimmt den Abstand zum Bildrand

Wenn der Text nicht direkt am Rand kleben soll:

padding: 28px;

Das ist Innenabstand. Mit der Positionierung über Flexbox brauchst du keine komplizierten absoluten Koordinaten wie top: 173px.

6. Warum absolute Positionierung oft schlechter skaliert

Ein Text kann natürlich auch mit position: absolute und bottom/left gesetzt werden. Das funktioniert, wird aber bei responsiven Karten schnell wartungsintensiver.

Flexbox passt sich automatisch an die tatsächliche Kartenhöhe an.

7. Responsive Schrift mit clamp()

Eine der längsten Passagen im ursprünglichen Chat beschäftigte sich damit, dass der Text in einem zwei- oder vierspaltigen Grid auf Desktop gut, nach dem Umspringen auf eine Spalte aber viel zu klein war.

Genau dafür eignet sich clamp():

font-size: clamp(1.5rem, 3vw, 3.2rem);

Die drei Werte bedeuten:

  • 1.5rem: Mindestgröße
  • 3vw: flexible Größe abhängig von der Viewport-Breite
  • 3.2rem: Maximalgröße

8. Was bringt den Text bei clamp zum Wachsen?

Der mittlere Wert steuert das flexible Wachstum. Bei 3vw entspricht die Schriftgröße drei Prozent der Browserbreite, solange Minimum und Maximum nicht erreicht sind.

Je größer der mittlere vw-Wert, desto schneller wächst die Schrift.

9. Was ist rem?

rem orientiert sich an der Grundschriftgröße des Dokuments. Bei den üblichen 16 Pixeln gilt ungefähr:

  • 1rem = 16px
  • 1.5rem = 24px
  • 2rem = 32px
  • 3rem = 48px

Der Vorteil: Die Schrift skaliert mit der grundlegenden Typografie und ist leichter zugänglich als starr definierte Pixelwerte.

10. clamp-Werte für ein zweispaltiges Grid

Bei zwei Karten nebeneinander kann der Text deutlich größer sein als in einem vierspaltigen Raster. Ein guter Ausgangspunkt:

font-size: clamp(1.8rem, 3.5vw, 3.5rem);

Das ist nur ein Startwert. Entscheidend ist, wie lang deine Überschriften sind und wie groß die Karten tatsächlich werden.

11. Auf dem Smartphone bewusst größer werden

Der ursprüngliche Verlauf zeigte ein typisches Problem: vw wird auf einem schmalen Smartphone kleiner, obwohl die Karte nach dem Grid-Umbruch plötzlich fast die gesamte Bildschirmbreite nutzt. Die automatische Formel kann dadurch paradoxerweise eine zu kleine Schrift liefern.

Deshalb ist eine separate mobile Regel oft besser:

.clickable-image-card .card-title {
    font-size: clamp(1.8rem, 3.2vw, 3.2rem);
}

@media (max-width: 767px) {
    .clickable-image-card .card-title {
        font-size: clamp(2rem, 8vw, 3.6rem);
    }
}

12. Lange Überschriften vor Überlauf schützen

Wenn der Text lang ist, sollte er umbrechen dürfen. Verwende deshalb nicht pauschal white-space: nowrap.

Hilfreich sind:

.card-title {
    max-width: 100%;
    overflow-wrap: break-word;
    hyphens: auto;
}

Bei deutschen Texten funktioniert automatische Silbentrennung besser, wenn die Website-Sprache korrekt auf Deutsch gesetzt ist.

13. Schwarzen Filter über das Bild legen

Weißer Text braucht ausreichend Kontrast. Der einfachste Weg ist ein dunkler Overlay:

.clickable-image-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.38);
    pointer-events: none;
}

Der Inhalt muss darüber liegen:

.clickable-image-card > * {
    position: relative;
    z-index: 1;
}

14. Verlauf statt gleichmäßiger Abdunklung

Wenn der Text nur unten sitzt, muss nicht das ganze Bild gleich dunkel sein:

background: linear-gradient(
    to bottom,
    rgba(0,0,0,.05) 30%,
    rgba(0,0,0,.70) 100%
);

So bleibt das Motiv oben heller, während der Textbereich unten deutlich mehr Kontrast erhält.

15. Wie der gesamte Container klickbar wird

Aktuelle GenerateBlocks-Versionen können Container als Link-Element ausgeben. Dabei wird der Container selbst als <a>-Element gerendert und erhält eine Ziel-URL.

Das ist sauberer als einen separaten absolut positionierten Link über die Karte zu legen.

16. Die wichtige Warnung zu verschachtelten Links

GenerateBlocks weist dabei zu Recht darauf hin: Wenn der gesamte Container ein Link ist, dürfen darin keine weiteren interaktiven Elemente stecken – also keine zusätzlichen Links oder Buttons mit eigener URL.

HTML erlaubt keine sinnvoll verschachtelten Links. Das führt zu ungültigem Markup und Problemen bei Tastaturbedienung.

17. Was tun, wenn die Karte einen Button enthalten soll?

Entweder:

  • der ganze Container ist klickbar und der „Button“ ist nur optisch gestalteter Text ohne eigenen Link, oder
  • der Container bleibt ein normales div und nur der echte Button beziehungsweise die Headline wird verlinkt.

Beides gleichzeitig als echte Links ist keine gute Lösung.

18. Barrierefreiheit des Link-Containers

Ein komplett klickbarer Container sollte ein klares Linkziel und verständlichen Linktext besitzen. Nur ein dekoratives Bild ohne sinnvollen Text ist für Screenreader wenig hilfreich.

Wenn die Headline den Zweck beschreibt, ist das deutlich besser.

19. Hover-Effekt

Eine klickbare Karte sollte visuell reagieren:

.clickable-image-card {
    transition: transform .25s ease;
}

.clickable-image-card:hover {
    transform: translateY(-3px);
}

Auch ein leichter Bildzoom ist möglich, sollte aber dezent bleiben.

20. Fokuszustand für Tastaturbedienung

Nicht nur Hover zählt. Tastaturnutzer müssen sehen können, welche Karte fokussiert ist:

.clickable-image-card:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 4px;
}

21. Höhe und Breite nicht doppelt starr definieren

Im ursprünglichen Verlauf kam die Frage auf, ob Breite und Höhe beide eingestellt werden müssen. Für responsive Karten ist ein Seitenverhältnis meist besser als feste Pixelwerte.

Beispiel:

width: 100%;
aspect-ratio: 4 / 3;

Die Höhe ergibt sich automatisch aus der Breite.

22. Beispiel für eine komplette Karte

.clickable-image-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 28px;
    overflow: hidden;
    color: #fff;
    background-size: cover;
    background-position: center;
    text-decoration: none;
}

.clickable-image-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,.72));
}

.clickable-image-card > * {
    position: relative;
    z-index: 1;
}

.clickable-image-card .card-title {
    max-width: 100%;
    font-size: clamp(1.8rem, 3.5vw, 3.4rem);
    line-height: 1.05;
    overflow-wrap: break-word;
}

@media (max-width: 767px) {
    .clickable-image-card .card-title {
        font-size: clamp(2rem, 8vw, 3.6rem);
    }
}

Fazit

Eine klickbare Bildkarte in GeneratePress/GenerateBlocks wird am stabilsten als Container mit Hintergrundbild aufgebaut. Flexbox positioniert den Text, ein Overlay sorgt für Kontrast und clamp() ermöglicht responsive Typografie. Wenn der gesamte Container als Link ausgegeben wird, dürfen darin keine weiteren interaktiven Links oder Buttons liegen. Gerade diese saubere Struktur verhindert viele der Probleme, die bei absolut positionierten Overlays und verschachtelten Links auftreten.