Flexbox

[MrMurphy1]

Hallo

Insofern: Wie mache ich das am besten?

Keine Ahnung. Du solltest dich nicht zu sehr auf hover-Effekte konzentrieren, schon gar nicht mit JavaScript, das wie schon geschrieben von vielen Usern blockiert ist.

Insgesamt solltest du dir auch bewußt machen, das inzwischen wohl schon über 80% aller User im Internet mit Touchscreen-Geräten (hauptsächlich Smartphones und Tablets) unterwegs sind, mit noch immer stark steigender Tendenz. Und die können keinen hover-Effekt. Unveränderbar.

Eigentlich wollte ich auch noch jeweils einen Text über die Grafik legen. Um's kurz zu machen: Ungefähr so wie hier oben bei der Newsübersicht: Hier.

Das ist kein Problem.

Muss man dafür einen Div-Container um jedes Bild legen?

Nein, warum willst du immer alles verkomplizieren? Benutze einfache Lösungen.

Wenn ja, ändert das wieder etwas an der variablen Fotobreite?

Da kein div erforderlich ist - nein.

Texte können über span-Elemente eingefügt werden. Ich habe ein einfaches Beispiel gemacht und eins mit "zwei" Texten, die dann auch unterschiedlich formatiert werden können:

      <a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/e/ec/Auto_Union_1000s-02.JPG" alt="Beispielbild"><span>Kurzer Text</span></a>

      <a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/c/c0/Auto_Union_1000_Sp_Garmisch-Partenkirchen_regne.jpg" alt="Beispielbild"><span>Und noch etwas mehr und mehr Text über das Bild<br><span>Autorin: Coco Chanel</span></span></a>

und das zugehörige CSS:

      nav a {
         position: relative;
      }
      nav a>span {
         color: white;
         background-color: hsla(0, 0%, 100%, 0.4);
         position: absolute;
         bottom: 0;
         width: 100%;
         display: inline-block;
         padding: 0.3rem;
      }
      nav a span span {
         color: yellow;
         display: inline-block;
      }
      a:hover>span {
         display: none;
      }

Gruss

MrMurphy