Flexbox

[MrMurphy1]

Hallo,

ich hatte das zunächst nicht verstanden. Damit sollten alle Browser zurechtkommen.

Der Text soll irgendwann unten stehen, aber das bekomme ich vermutlich hin (mit Padding-Bottom?).

Das ist eher ungeeignet, da die Bilder unterschiedlich hoch sind.

Offensichtlich willst du nur Text mit einer Schrift (Art, Größe, Farbe) benutzen. Dann schlage ich folgende Lösung vor:

Der Text kommt in zwei geschachtelte span-Elemente, also

<a href="#"><img src="pfad/bildname.jpg" alt="Beispielbild"><span><span>Kurzer Text</span></span></a>

Das äußere span liegt mit seiner Hintergrundfarbe komplett auf dem Bild. In dem inneren span werden die Texteinstellungen (Schriftart, -größe u.s.w.) vorgegeben und der Text unten im Bild ausgerichtet.

Das CSS dazu könnte dann so aussehen:

/* Damit "position: absolute;" sich an den a-Elementen ausrichtet */
nav a {
   position: relative;
}
/* Einstellungen für alle span-Elemente, egal welcher Ebene */
nav a span {
   display: inline-block;
   width: 100%;
}
/* Einstellungen für den "Hintergrund vor dem gesamten Bild" */
nav a>span {
   background-color: hsla(0, 0%, 100%, 0.4);
   position: absolute;
   bottom: 0;
   height: 100%;
}
/* Einstellungen für den Text */
nav a>span>span {
   color: white;
   position: absolute;
   bottom: 0;
   padding: 0.3rem;
}
a:hover>span {
   display: none;
}

Gruss

MrMurphy