Text Overlay bei Bildern: "live"-Version komplett falsch (CSS)?

Hallo,

ich versuche bei bestimmten Bildern ein Overlay als Text zu haben, welches am Bild oben rechts platziert wird. Ich habe ein bisschen was gebastelt und zusammen gesucht, aber der Overlay liegt nicht über dem Bild, sondern scheint sich am Bildschirm zu orientieren. Er soll eigentlich nur beim zweiten Bild erscheinen und die Bilder davor und danach sollen sich einreihen, das tut er aber nicht.

https://codepen.io/gooloonetwork/pen/MWQXzbd

Das Problem ist aber, dass es auf der Live-Webseite (www.gooloo.de/partner) so aussieht (die Bilder sind extrem klein und "zusammen gedrückt"):

Answer 1

[medmonk]

1. Entferne die Attribute für Höhen und Breiten
2. Pack die Bilder in einen eigenen Container (ration-wrap)
3. Gib dem Container ein position: relative
4. Füg ein <span> Element als Label ein
5. Positioniere das <span> absolute innerhalb des Containers

HTML:

<div class="row">
  <div class="ratio-wrap">
    <img src="path/image1.jpg" alt="desc">
    <span class="label">Neu</span>
  </div>
  <div class="ratio-wrap">
    <img src="path/image2.jpg" alt="desc">
  </div>
</div>

CSS:

*, *::before; *::after {
  box-sizing: border-box;
  padding: unset;
  margin: unset;
}

img {
  width: 100%;
  height: auto;
}

.ration-wrap {
  max-width: 200px;
  aspect-ratio: 1;
  object-fit: cover;
  position: relative;
}

.ratio-wrap .label {
  position: absolute;
  inset: 0.5rem 0.5rem auto auto;
  color: #fff;
  background-color: #000;
  border-radius: 5px;
  font: 13px sans-serif;
}

LG medmonk

Woher ich das weiß: Berufserfahrung – UI/UX Designer, Full-Stack Developer