Image Overlay on Product-Grid on Browsers

Store Design
1

Hello!

I am currently having an issue with product grid images. There is a high opacity overlay (similar to what occurs when products are sold out) that seems to occur on some browsers. All products are in-stock and listed as such, but I haven’t been able to adjust code to remove the overlay, which I’d rather do permanently even when Sold Out status is active.

Individual product pages do not currently show any issues as all images are displaying normally. It seems to be on the “…collections/all” page that is the sole problem.

Is there an easy code fix for this?

Thanks,

DC

1 Like
2

Hello, @thesauce101

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

1 Like
3

Hi - my apologies for not including this. Please see below:

https://thediabetesbox.com/collections/all

be-with-blue.myshopify.com

Thanks,
DC

4

@thesauce101

Thanks for it

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.grid-link__image--loading { -webkit-animation: none; animation: none;}
.grid-link:hover .grid-link__image, .grid-link:active .grid-link__image, .grid-link--focus:hover .grid-link__image, .grid-link--focus:active .grid-link__image {
    opacity: 1;
}
1 Like
5

Perfect! Thank you so much, your help is greatly appreciated.

DC

1 Like
6

@thesauce101

Thanks for update and support

1 Like