FROM CACHE - en_header

Debut theme - remove gray overlay - collections grid

Solved
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.

 

Accepted Solution (1)

Accepted Solutions
seannyb
Shopify Staff (Retired)
Shopify Staff (Retired)
1 1 9

This is an 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! 

View solution in original post

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

 

GreenDragon
Shopify Partner
16 0 6

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
Shopify Staff (Retired)
Shopify Staff (Retired)
1 1 9

This is an 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
New Member
1 0 5

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! 

 

Carina Rivera Freelancer / Web Designer and Developer info@carinarivera.com
iurik
New Member
3 0 0

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
New Member
10 0 0

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
New Member
1 0 0

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
New Member
10 0 0

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
Excursionist
39 1 4

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

Please see attached screenshots.

 

Screenshot 2019-09-11 11.09.12.pngScreenshot 2019-09-11 11.15.15.pngScreenshot 2019-09-11 11.20.44.png

kittycatt
New Member
10 0 0

 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
Excursionist
39 1 4