Debut theme - remove gray overlay - collections grid

[Alex68]

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.

[Porcupine]

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]

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]

any one?

[Taimur_Khan]

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]

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]

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

[Vivian3]

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]

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

[Dave_Quigley]

Is this for celebratefinejewelry.com/ ?

Try: 

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

[GreenDragon]

this worked for me - you have to change both the background-color and opacity to 0:

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

[seannyb · Accepted solution]

Hey everyone! There is a setting in the theme editor if you go to Online Store > Themes > Customize > Theme settings (at the top) > Colours  and then there should be a section for Image Overlay and you can move the Opacity to 0 to remove it 🙂

If you don't see this option you'll want to update your theme by downloading a new copy from the theme store. 

Cheers! 

[Carina_Designs]

Hello! I have figured it out and happy to share it with everyone. On the DEBUT theme: To remove the white/gray overlay that occurs when you hover a product image in the collection view you will need to go to online store > themes > actions 'edit code' > on 'theme.scss.liquid' search for .product-card, on opacity- change it to 1 > click 'save' and boom your problem is solved! 

[iurik]

Thank you so much!
Finally, I made it thanks to your help!!! 🙂

---

@Carina_Designs wrote:

Hello! I have figured it out and happy to share it with everyone. On the DEBUT theme: To remove the white/gray overlay that occurs when you hover a product image in the collection view you will need to go to online store > themes > actions 'edit code' > on 'theme.scss.liquid' search for .product-card, on opacity- change it to 1 > click 'save' and boom your problem is solved! 

---

[kittycatt]

You need to locate this in your css (theme.scss.liquid)

Should be around line 6205

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

Change the background color and the opacity to 0 as shown ( in bold). They will both have something like this in its place before you change it: $opacity-image-overlay

[perfectparty1]

Idk why but I did exactly what you said and it's not working for me! 

---

@Carina_Designs wrote:

Hello! I have figured it out and happy to share it with everyone. On the DEBUT theme: To remove the white/gray overlay that occurs when you hover a product image in the collection view you will need to go to online store > themes > actions 'edit code' > on 'theme.scss.liquid' search for .product-card, on opacity- change it to 1 > click 'save' and boom your problem is solved! 

---

[kittycatt]

Not sure why it is not working for you. Can you take a screen shot of what you changed in your code and post it?

[Lovelyn12]

I follow all the ideas and instructions here but it didn't worked. Please help! Thanks in advance.

Please see attached screenshots.

[kittycatt]

 Take a screen shot in (theme.scss.liquid) on the first few lines of 6205 so I can see what is there please. Looks like you did not change the right thing. you should be adding what I posted above under this  .collection-grid-item__title-wrapper::before {

[Lovelyn12]