Image Overlay on Product-Grid on Browsers

Solved
Highlighted
Tourist
5 0 2

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 

Highlighted
Shopify Partner
9491 1195 3331

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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Highlighted
Tourist
5 0 2
Hi - my apologies for not including this. Please see below:

https://thediabetesbox.com/collections/all

be-with-blue.myshopify.com

Thanks,
DC
0 Likes
Highlighted
Shopify Partner
9491 1195 3331

This is an accepted solution.

@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;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Highlighted
Tourist
5 0 2

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

DC

Highlighted
Shopify Partner
9491 1195 3331

@thesauce101 

Thanks for update and support

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing