Home › Forums › Basel support forum › Transparency on Product Image on mouseover

Transparency on Product Image on mouseover

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • September 4, 2020 at 1:02 am #223487

    sandrofinoribeiro
    Participant

    Hi,
    Im uploading my product photos with transparent background, in that way i have a fantastic result, for example, when i search products, the product image results appears in the dark background, very nice.
    On the contrary, in the product page when i mouseover the product image and activates the zoom effect: if the product image have transparent background i still see the original image behind, and if the product image have white background it works fine, but in the search results its not beautiful. Can you give me a solution for this?
    I attached some images: the product CSL RESERVA have white background and CSL MERLOT have transparent background.
    Thanks,
    SR

    Attachments:
    You must be logged in to view attached files.
    September 4, 2020 at 7:09 am #223536

    Elise Noromit
    Member

    Hello,

    Please add this code to the Theme Settings > Custom CSS > Global:

    .woocommerce-product-gallery__wrapper .zoomImg[src$=".png"],
.woocommerce-product-gallery__wrapper figure {
  background-color: white;
}

    Best Regards

    September 5, 2020 at 12:18 pm #223882

    sandrofinoribeiro
    Participant

    That’s it.
    Thanks for the great support!

    September 5, 2020 at 2:23 pm #223905

    Elise Noromit
    Member

    You are welcome! If you have any questions please feel free to contact us.

    Best Regards

  • Author
    Posts

Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Transparency on Product Image on mouseover’ is closed to new replies.