Jump to content

Make fade PNG IMAGES - e commerce products

Recommended Posts

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 🙂

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

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.

Capture d’écran 2021-12-01 à 15.52.48.png

Capture d’écran 2021-12-01 à 15.52.55.png

Capture d’écran 2021-12-01 à 15.53.04.png

Link to comment

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.