Product images with transparency – zoom

This topic has 9 replies, 3 voices, and was last updated 6 years, 5 months ago by Artem Temos.

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

Author

Posts
September 10, 2018 at 8:22 am #76293

coleconsulting
Participant

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.

September 10, 2018 at 8:40 am #76300

Elise Noromit
Member

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

September 10, 2018 at 8:56 am #76301

coleconsulting
Participant

Sure, here you go:

September 10, 2018 at 11:02 am #76327
Elise Noromit
Member
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
September 10, 2018 at 2:22 pm #76441

coleconsulting
Participant

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.

September 10, 2018 at 8:27 pm #76500

Elise Noromit
Member

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

September 11, 2018 at 5:52 am #76522

coleconsulting
Participant

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

September 11, 2018 at 6:33 am #76542
Artem Temos
Keymaster
Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.
```
img.zoomImg {
    background: #444444;
}
```
September 11, 2018 at 7:21 am #76556

coleconsulting
Participant

That fixed the issue.
Thanks a lot!

September 11, 2018 at 8:10 am #76560

Artem Temos
Keymaster

You are welcome.
Author

Posts