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:
    89
    Danke erhalten:
    0
    Danke vergeben:
    2
    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:
    1.753
    Danke erhalten:
    699
    Danke vergeben:
    254
    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:
    89
    Danke erhalten:
    0
    Danke vergeben:
    2
    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:
    1.753
    Danke erhalten:
    699
    Danke vergeben:
    254
    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:
    89
    Danke erhalten:
    0
    Danke vergeben:
    2
    Und nochmal Danke, es funktioniert einwandfrei.