Removing white overlay on images in Debut theme

Hi everyone,

I have a question regarding the white overlay on ALL my images in my store. I have been going through the community to find answers but could not find them specifically to my problem.

Whenever I hoover my mouse over ANY image, a white overlay appears. It has nothing to do with the opacity in the theme settings so I’m afraid it has something to do with the code.

I hope someone can teach me how to remove the white overlay.

The website link is: www.chuush.nl

Thanks in advance!

2 Likes

@Chuush

Welcome to the Shopify community!
Thanks for your good question.

Please share your store URL.
So that I will check and let you know the exact solution here.

@Chuush Can you please send me store url?

1 Like

www.chuush.nl

The link is www.chuush.nl

Hello @Chuush

Please follow the steps

  1. Online store > themes > actions > edit code

2.Assets->theme.css and ctrl + f and search ‘product-card:hover’ and see in below seccrenshot

.product-card:hover .product-card__image-wrapper, .product-card:focus-within .product-card__image-wrapper {
    opacity: 1;
}

I hope it will help you

Brilliant! That definitely worked for all the product pictures. However it remains the same for collection images and slideshows. Is there a way to change that too?

1 Like

Hello @Chuush

yes, possible

  1. Online store > themes > actions > edit code

2.Assets->theme.css and ctrl + f and search ‘.collection-grid-item__link:hover’ and see in below seccrenshot

For Collections

For slideshow
Find ‘.image-bar__link:hover’ and set opacity:0 as per in screenshot

I hope it will work for you Click Like to let me know! and Mark it as an Accepted Solution

3 Likes

You’re my hero! It worked, thanks a million!

1 Like

Thank you so much for your kind words. Contact us freely for any help. Thank you :slightly_smiling_face: @Chuush