Faded product images on collection pages (Debut)

Store Design
1

Hey everyone,

I’m using the Debut theme, and I’m having some issues with the appearance of the product images on my collection pages.

When hovering over the product image, the image appears faded out. Is there a way that I can stop this from happening?

I think this person was having the same issue, but neither of the solutions suggested have worked for my store:

https://community.shopify.com/c/shopify-scripts/image-hover-remove-opacity-debutify-theme/td-p/1905870

Thank you so much for your time : )! xxx

2

@Lala44 - can you please share the page link where you are facing this issue?

3

hi @Lala44
Thank you for your question.
Please share your store URL, page URL and also password (if your store has one) so we can help you.

4

Hello @Lala44 ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to Assets → base. css file

Search for the CSS selector that targets the product image on collection page, look like this

.grid-view-item__image-wrapper:hover img {
  opacity: 0.8;
}

Remove the line opacity

Save and preview

Hope this can help.

Transcy

5

Hey!

Thank you so much for getting back to me! I don’t have a base.css file under Assets (or anywhere that I can see) - but I did have a look through theme.scss.liquid and found some similar code, but nothing exactly matching the code you shared above. No mention of ‘hover’ anywhere.

Thank you so much for your time : )!