Debut theme - remove gray overlay - collections grid

Alex68
Tourist
5 0 3

Hi there,

I would like to remove the overlay (grey / opacity) on mouseover on the product images in the collection grids.

I've looked for that in theme.scss.liquid and could not find.

Any help would be appreciated.

Thanks.

Alex.

 

Replies 25 (25)
Porcupine
New Member
7 0 0

This is a good question and becomes very relevant when you have collection grids made up of products with multiple images/variants. I too would like to know the answer to this.

Elizabeth410
New Member
1 0 0

I would also love to know how to remove the grey overlay on collection main images in the Debut theme. Any help is appreciated!

Taimur_Khan
New Member
3 0 0
Taimur_Khan
New Member
3 0 0

changing opacity in 

.collection-grid-item__title-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: $color-image-overlay;
  opacity: 0;
}

to 0 seems to do a the trick

it is in theme.scss.liquid around line 5675

please confirm if it works for you?

Jessi_Knight
New Member
1 0 0

This didn't work for me unfortunately. It's pretty frusturating, I've tried everything that could possibly be targeting these divs yet nothing seems to work. Anybody have any alternate ideas?

Coco1
Tourist
15 0 2

Any luck with solving this one? I am also trying to find the solution..

Vivian3
New Member
1 0 0

Hello, yes this can be done by editing the theme.scss.liquid file.

Look for the following code (see attached printscreen) and replace 0.5 to 1.

smize
New Member
1 0 0

That didn't work for me, either. This is so frustrating! 

Dave_Quigley
Shopify Partner
15 0 8

Is this for celebratefinejewelry.com/ ?

Try: 

.listing-card:hover {opacity: 1;}