5 Logos darstellen (zentriert)

<style>
/* Container für die 5er Aufteilung */
.row-flex-5 {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: 20px 0;
}

/* Basis-Styling der Kacheln */
.row-flex-5 .kachel {
flex: 0 0 20%; /* Exakt 20% Breite auf Desktop */
max-width: 20%;
padding: 15px;
text-align: center;
}

/* Hover-Effekt 08: Sanfter Zoom */
.hover08 figure {
overflow: hidden; /* Verhindert, dass das Bild beim Zoomen über den Rand ragt */
margin: 0;
}

.hover08 figure img {
display: block;
margin: 0 auto;
max-height: 100px; /* Optional: Einheitliche Höhe für die Logos */
width: auto;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}

.hover08 figure:hover img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}

/* Responsive Anpassung für Tablet (3 pro Reihe) */
@media (max-width: 992px) {
.row-flex-5 .kachel {
flex: 0 0 33.33%;
max-width: 33.33%;
}
}

/* Responsive Anpassung für Handy (2 pro Reihe) */
@media (max-width: 480px) {
.row-flex-5 .kachel {
flex: 0 0 50%;
max-width: 50%;
}
}
</style>

<div class="row row-flex-5">
<div class="kachel hover08">
<figure><a href="/magic-the-gathering/"><img alt="Magic" class="img-responsive" src="images/logomagic.png"/></a></figure>
</div>
<div class="kachel hover08">
<figure><a href="/one-piece/"><img alt="One Piece" class="img-responsive" src="/images/logoonepiece.png" /></a></figure>
</div>
<div class="kachel hover08">
<figure><a href="/trading-card-games/disney-lorcana/"><img alt="Lorcana" class="img-responsive" src="/images/logolorcana.png" /></a></figure>
</div>
<div class="kachel hover08">
<figure><a href="/trading-card-games/pokemon/"><img alt="Pokemon" class="img-responsive" src="/images/logopokemon.png" /></a></figure>
</div>
<div class="kachel hover08">
<figure><a href="trading-card-games/riftbound-league-of-legends-tcg/"><img alt="Riftbound" class="img-responsive" src="/images/logoriftbound.png" /></a></figure>
</div>
</div>

 

Kannst das CSS-Layout mit in Dein Stylesheet nehmen oder nimm es mit ins HTML. Probiere mal ob es funktioniert. LG

 

könnte am Flex liegen -> tausch mal das CSS und probiere mal:
<style>
/* Grundstruktur */
.row-flex-5 {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: 0 -15px; /* Kompensiert das Padding der Kacheln */
}

/* Kachel-Styling */
.row-flex-5 .kachel {
padding: 15px;
text-align: center;
box-sizing: border-box;
}

/* Desktop: 5 Elemente (ab 992px) */
@media (min-width: 992px) {
.row-flex-5 .kachel {
flex: 0 0 20%;
max-width: 20%;
}
}

/* Tablet: 3 Elemente (768px bis 991px) */
@media (min-width: 768px) and (max-width: 991px) {
.row-flex-5 .kachel {
flex: 0 0 33.33%;
max-width: 33.33%;
}
}

/* Handy: 2 Elemente nebeneinander (unter 767px) */
@media (max-width: 767px) {
.row-flex-5 .kachel {
flex: 0 0 50%;
max-width: 50%;
padding: 10px; /* Etwas weniger Padding auf dem Handy */
}

.row-flex-5 .kachel img {
max-height: 80px; /* Logos auf dem Handy etwas kleiner, damit sie passen */
}
}

/* Hover-Effekt 08 */
.hover08 figure {
overflow: hidden;
margin: 0;
}

.hover08 figure img {
display: block;
margin: 0 auto;
max-height: 100px;
width: auto;
max-width: 100%; /* Wichtig, damit das Bild nicht aus der Kachel bricht */
transition: .3s ease-in-out;
}

.hover08 figure:hover img {
transform: scale(1.1);
}
</style>

LG