Product images with transparency – zoom

Hi there,

I think I found a bug.
We use .png product images with transparent background, so that the product image blends into the shops background nicely.
Unfortunately when hovering the mouse over the product image, so that the image zooms in, the original image still shows.
Due to the transparency it shows through the zoomed images.
I’ve attached a screenshot.
Can this be fixed?

Thanks!

Attachments:

You must be logged in to view attached files.

Hello,

Thank you very much for choosing our theme and contacting us.

Please provide your site URL and site admin access we shall provide you with custom CSS.

Best Regards

Sure, here you go:

Hello,

Now you have replaced png with jpeg and I do not see the problem. Anyway try to add this code and set the background color white or black as per your needs:

.product-grid-item .hover-img{
   background:#000000;
}

Add this code to the Theme settings > Custom CSS.

Best Regards

Thanks for your help!
No, the image is still a .png with transparent background. It’s the first image.

I’ve added the code to custom CSS, but it doesn’t work.
But I added background:#ffffff in the Chrome site inspector and it worked.
Check the attached screenshot.
Does the code contain the correct class?
I’m talking about the zoomed image which shows up un the product detail page when hovering with the mouse pointer above the product image.

Thanks!

Attachments:

You must be logged in to view attached files.

Hello,

Now both images are jpeg http://prntscr.com/ksv57n

And now I check the products and they are not layered each on other https://gyazo.com/2e8313415ed21e00d49ab852e3e40ee1

Best Regards

That’s the wrong image. Also you’re not on the product detail page.
I’ve uploaded a screencast to youtube, to better explain:
https://youtu.be/bB7mYoalFkY

Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.

img.zoomImg {
    background: #444444;
}

That fixed the issue.
Thanks a lot!

You are welcome.

[Author]

Posts