Darkening of collection images on Debut theme

[Lucy_Bowyer]

Hi, I am currently using Debut theme and like everything about it except for the fact that it adds a dark overlay to my featured collection images. I want my bright images to remain at the same brightness and to not be darkened. Can anyone help me fix this?

Thanks

[Nick_Atkinson]

Hi Lucy,

You'll want to go into your theme.scss.liquid file located in your theme assets and find the code below:

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

What's causing the color overlay is "background-color: $color-image-overlay;" you can either delete that line or comment it out like below:

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

[Lucy_Bowyer]

YES! This has worked, thank you so much Nick! I've been stuck on that for weeks! Can this also be done for the main hero image, if so would you mind pointing me to that code?

Also, is there anyway to make it lighten on hover? Previously it was a darkened image that lightened to its true state, I'd like it to be the normal image with a lighter/white overlay on hover if possible. Thanks again!

[Nick_Atkinson]

Hi Lucy,

I'm seeing that is already happening on my end (at a .60 opacity) however if you want it more white you can do the following:

Paste this at the bottom of your "theme.scss.liquid" file:

/*================ #Custom Overlay ================*/

$custom-opacity-link-hover: .40;
.custom_overlay {
  a {
    color: $color-text;
    text-decoration: none;

    &:hover,
    &:focus {
      opacity: $custom-opacity-link-hover;
    }
    
  }
}

In your snippets open "collection-grid-item.liquid" and find the code below:

<div class="collection-grid-item">

Replace it with this code:

<div class="collection-grid-item custom_overlay">

If you want the white to appear differently you can adjust the opacity in the $custom-opacity-link-hover variable

[Nick_Atkinson]

Sorry Lucy I missed the part about the hero image, you can do this by hiding the overlay in your "theme.scss.liquid" file:

Find:

.hero__overlay {
  @include overlay(1);
}

Replace:

.hero__overlay {
  /* @include overlay(1); */
}

[Lucy_Bowyer]

Thanks so much Nick, really appreciate that :)

[Lucy_Bowyer]

I've just realised that now in my collection pages, the product photos now go completely white when hovered on - have I done this wrong? 

[Nick_Atkinson]

Hi Lucy,

Can you provide the password to your storefront so I can take a look at what's happening and assess the CSS?

[Lucy_Bowyer]

Sure, the password is: miafru

[Nick_Atkinson]

Hi Lucy,

I'm seeing an extra class that I don't have on my dev debut theme. It's setting the opacity to 0 when hovering the product.

.product-card:hover>*,.product-card:focus-within>* {
    opacity: 0.0;
}

You might want to remove that or change the opacity to 1