CSS Bildgröße Produktliste anpassen

Thema wurde von Jan Brodowsky, 28. Januar 2022 erstellt.

  1. Jan Brodowsky
    Jan Brodowsky Erfahrener Benutzer
    Registriert seit:
    20. Juni 2012
    Beiträge:
    273
    Danke erhalten:
    34
    Danke vergeben:
    151
    #1 Jan Brodowsky, 28. Januar 2022
    Hallo zusammen,
    kann mir bitte jemand helfen:
    Ich möchte das Bild in der Produktliste oberhalb des Footers auf die Größe 250x250 anpassen und den mouseover entfernen.

    https://www.bowling-store.de/
    Die Klasse heißt productlist6mvkbw43x
     
  2. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    11. Juli 2021
    Beiträge:
    450
    Danke erhalten:
    209
    Danke vergeben:
    149
    #2 Anonymous, 28. Januar 2022
    Hi,

    über Dev-Tool kurz rausgeschnibbelt, nicht auf Nebenwirkungen geprüft:

    Bildgröße 250px:

    .productlist-viewmode-grid .product-container .product-tile figure .product-image img, .productlist-swiper .product-container .product-tile figure .product-image img, .product-container.flyover .product-tile figure .product-image img {
    height: auto;
    max-height: 250px;
    max-width: 100%;
    }

    Hover aus:
    (Dann ist die Funktion aber grundsätzlich aus und funzt in keinem Product Container mehr.

    .product-container.flyover {
    display: none;
    }
     
  3. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.629
    Danke erhalten:
    11.350
    Danke vergeben:
    1.614
    #3 barbara, 28. Januar 2022
    Setzte ein Bild mit Text ein und verlinke das.
    Anders dürfte das sehr schwer umsetzbar sein.
     
  4. Jan Brodowsky
    Jan Brodowsky Erfahrener Benutzer
    Registriert seit:
    20. Juni 2012
    Beiträge:
    273
    Danke erhalten:
    34
    Danke vergeben:
    151
    #4 Jan Brodowsky, 31. Januar 2022
    Guten Morgen und vielen Dank für eure Antworten.
    @O.C. der Ansatz ist gut, aber wie @Devil schon richtig festgestellt hat geht es ja nur um genau das eine Bild.

    @barbara, auch danke für Deinen Tipp, nur fehlt mir dann das random beworbene neue Produkt.
     
  5. Jan Brodowsky
    Jan Brodowsky Erfahrener Benutzer
    Registriert seit:
    20. Juni 2012
    Beiträge:
    273
    Danke erhalten:
    34
    Danke vergeben:
    151
    #5 Jan Brodowsky, 31. Januar 2022
    Teilerfolg: ich habe die Klasse angesprochen und die Textfarbe auf rot verändert. Allerdings an der Bildgröße ändert sich nichts...
    Code:
    #productlist6mvkbw43x, #productlist6mvkbw43x-1981_img.image {
height: auto;
max-height: 250px;
max-width: 100%;
color: red;
}
     
  6. frank_machnick
    frank_machnick Mitglied
    Registriert seit:
    11. November 2021
    Beiträge:
    14
    Danke erhalten:
    1
    Danke vergeben:
    1
    #6 frank_machnick, 15. Februar 2022
    Wenns dir nur darum geht das mittlere Bild auf 250Px zu begrenzen dann würde ich das so probieren:

    Ist aber sehr dirty

    Code:
    .swiper-slide[data-index="productlist6mvkbw43x-1982"] {
    width: 100%!important;
}

.productlist-viewmode-grid .product-container .product-tile figure#productlist6mvkbw43x-1982_img .product-image img {
    height: auto;
    width: auto;
    max-height: 250px;
    display: block;
    margin: 0 auto;
}

/* Hide Hover */

.swiper-slide[data-index="productlist6mvkbw43x-1982"]:hover {
    opacity: 0;
}