CSS figure

[Rolf B]

Hallo Christian,

whoa, was für ein komplexes Werk mit der Positionierung. Ich weiß natürlich nicht, wofür Du die .uiS Klasse sonst noch brauchst, aber wenn Du möchtest, dass deine Bilder wie ein klassischer Printabzug mit Rand aussehen, dann kannst Du auch das ganze Border-, Schatten und Margin-Gedöns vom img Element wegnehmen. Gib der figure einen passenden Margin, dazu Padding für den Fotorand und box-shadow. Mach das Padding unten nicht extrabreit, sondern positioniere die figcaption ganz normal statisch, nicht absolut. Dann ergibt sich da alles von selbst.

Viele Angaben zu Margin, Padding oder Border kann man übrigens zusammenfassen. Statt margin-top, margin-right, margin-bottom und margin-left einzeln anzugeben, kann man die 4 Werte als "margin: ..." angeben. Guck mal hier.

Die Checkbox kannst Du dann in die figcaption mit aufnehmen. Da sie ohnehin eine Beschriftung braucht (label Element), kannst Du das als Block-Element stylen und mit text-align den Inhalt zentrieren. Die Beschriftung selbst kannst Du in einen span stecken und visuell verbergen, aber sie gehört für Leute, die einen Screenreader verwenden (Blinde, Analphabeten) dazu.

Ich würde Dir auch noch empfehlen, die figure zu einem Grid zu machen, um das a-Element, in dem das Bild steckt, mit justify-self/align-self zentrieren zu können (falls das Thumbnail schmaler ist als die figcaption).

Und 1500px ist für ein Thumbnail eine monströse Größe, das sollten eher 12em sein oder 150px. Deine Fontsize ist auch zu klein. 10px ist ungeeignet. Wenn's schon kleiner sein soll, unterschreite 80% der Browser-Defaultgröße nicht, und gib es als % an. Lass den Brille tragenden Anwendern die Möglichkeit, zu zoomen.

HTML:

<figure>
  <a class="clue" href="#" title="24.01.2021 17:47 Uhr" target="blank">
    <img class="uiS" src="https://i.postimg.cc/sxTzcgc1/Bild1.jpg" alt="thumb">
  </a>
  <figcaption>24.01.2021 17:00 Uhr
    <label>
      <span class="visually-hidden">Auswählen</span>
      <input type="checkbox" name="foto" value="Bild1.jpg">
    </label>
  </figcaption>
</figure>

CSS:

.uiS {
   background: #FFF;
}

figure {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr auto;
   font-size: 80%;
   font-weight: bold;
   max-width: 12em;
   margin: 1em;
   padding: 1em 1em 0.2em 1em;
   border-radius: 0.4em;
   background-color: #F2F2F2;
   box-shadow: 1px 2px 4px rgba(0,0,0,.5);
}

figure a {
   justify-self: center;    /* Zentriere Link in der Grid-Zelle */
   align-self: center;
}

figure img {
   max-width: 100%;      /* Bild nicht größer als figure */
   display: block;
}
figcaption {
   margin-top: 0.5em;
}
figcaption label {
   display: block;       /* Label auf eigene Zeile und volle Breite */
   text-align: center;   /* Inhalt zentrieren */
}
.visually-hidden {
   font-size: 0;         /* Beschriftung visuell verstecken */
   margin: 0;
   padding: 0;
}

Beispiel (mit großem Bild): https://jsfiddle.net/Rolf_b/Lbowde2z/

Rolf