Make fade PNG IMAGES - e commerce products

Hi there,

I have loaded all my products images in PNG format (people wearing clothe without background). So the pbm I have now is that everytime the second picture appears, we can see the first one underneath! So I have the option to reload all the pictures in JPG and keep the first one in PNG. But it will take me a loooooOOOOOOOooooooooong time to redo all that!!!!

So i was wondering if it could be the solution to add a fading option on my product images galery in order to make disappear the images everytimes a new one appears.

Let me know if i can add a code somewhere to make my images without background fading slowly when another picture of the galery appear just behind it ?

Thank you very much for your time and help 🙂

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Thank you for your reply !
Unfortunately I can't share the product yet. Here are the screen shot enclosed. Let me know if you understand better 🙂 

First picture, then the 2nd picture with the first one still visible underneath, then the galery with all the pictures that i'd like to make them fade each time a new picture appears.

I understood the general problem. We need to be able to work with the site.

It's like going to the auto mechanic and saying fix my car without bringing in the car.

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<style>

  .tweak-product-basic-item-gallery-design-slideshow .ProductItem-gallery-slides-item {
  
    background-color : red;
    
    }
    
  </style>

This is for v7.1.

Change the background color to suit your need.

Let us know how it goes.

Thank you very much! I go to try this 😉