Darkening of collection images on Debut theme

Highlighted
New Member
6 0 0

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

0 Likes
Explorer
83 0 24

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

 

1 Like
New Member
6 0 0

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!

0 Likes
Explorer
83 0 24

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

0 Likes
Explorer
83 0 24

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); */
}

 

0 Likes
New Member
6 0 0

Thanks so much Nick, really appreciate that :)

0 Likes
New Member
6 0 0

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? 

0 Likes
Explorer
83 0 24

Hi Lucy,

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

0 Likes
New Member
6 0 0

Sure, the password is: miafru

0 Likes
Explorer
83 0 24

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

0 Likes