Produktbild mit Schatten

Thema wurde von ingo_kreft, 17. Juli 2024 erstellt.

  1. ingo_kreft
    ingo_kreft Erfahrener Benutzer
    Registriert seit:
    28. Februar 2019
    Beiträge:
    131
    Danke erhalten:
    1
    Danke vergeben:
    6
    Hallo,
    ich würde dem Produktbild in der Artikelansicht gerne einen Schatten und/oder einen Rahmen verpassen.
    Wenn ich class="img-responsive" oder class="swiper-slide" ändere, funktioniert das zwar, aber es ändern sich leider auch noch andere Bilder oder Divs im Shop, die die gleiche Klasse benutzen.
    Wie bekomme ich es hin, dass sich eine CSS Anweisung nur auf das Produktbild in der Artikelansicht bezieht?
     
  2. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    5. Mai 2022
    Beiträge:
    2.335
    Danke erhalten:
    1.019
    Danke vergeben:
    389
    mit diesem CSS Code habe ich allen Artikelbildern einen Schatten gegeben. Also auch in der Produktliste usw.
    Kannst dir ja in meinem Shop anschauen.

    Code:
    .page-product-info .swiper-slide-inside img, .product-tile .product-image img, .promotion-box-image img, .cart-dropdown-inside img, .page-shopping-cart .item img, .box-bestsellers img, .page-checkout-confirmation tr.item td.image img, .textbox-eykzfuka9 img, .textbox-0taiuwp9h img {
        box-shadow: rgba(50, 50, 93, 0.25) 10px 12px 15px 1px,
                    rgba(0, 0, 0, 0.3) 0px 10px 13px -7px;
    }
     
  3. ingo_kreft
    ingo_kreft Erfahrener Benutzer
    Registriert seit:
    28. Februar 2019
    Beiträge:
    131
    Danke erhalten:
    1
    Danke vergeben:
    6
    Danke, das funktioniert so weit schon ganz gut, nur die Thumbs links bekommen auch einen Schatten.
    Da muss ich mal schauen, ob ich den Hintergrund transparent bekomme und etwas mehr Abstand oben und unten einfügen kann, sonst ist der Schatten abgeschnitten.
     
  4. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    5. Mai 2022
    Beiträge:
    2.335
    Danke erhalten:
    1.019
    Danke vergeben:
    389
    hiermit bekommen die Thumbs keinen Schatten:
    Code:
    .product-info-image .product-info-image-inside .swiper-slide .swiper-slide-inside img, .product-info-layer-image .product-info-image-inside .swiper-slide .swiper-slide-inside img {
        box-shadow: rgba(50, 50, 93, 0.25) 10px 12px 15px 1px, rgba(0, 0, 0, 0.3) 0px 10px 13px -7px;
    }
     
  5. ingo_kreft
    ingo_kreft Erfahrener Benutzer
    Registriert seit:
    28. Februar 2019
    Beiträge:
    131
    Danke erhalten:
    1
    Danke vergeben:
    6
    Und nochmal Danke, es funktioniert einwandfrei.