Debut theme - remove gray overlay - collections grid

New Member
5 0 0

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.

 

0 Likes
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.

0 Likes
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!

0 Likes
New Member
3 0 0

any one?

0 Likes
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?

0 Likes
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?

0 Likes
New Member
15 0 0

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

0 Likes
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.

0 Likes
New Member
1 0 0

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

0 Likes
Shopify Partner
15 0 5

Is this for celebratefinejewelry.com/ ?

Try: 

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

 

0 Likes