How to remove black overlay from Brooklyn theme's collection list?

[AnaEB]

Hi, I'm editing my website but want to get rid of the slight black overlay that is added to the collection list since it makes my collection list photo look too dark. How can I change this? Thanks!

[ZestardTech]

Hello There,

Please share your store URL and screenshot.
So that I will check and let you know the exact solution here.

[Moira · Accepted solution]

Hey, @AnaEB!

This is Moira from the Social Care team at Shopify. Thanks for posting, and a very warm welcome to the Community!

I understand you are wanting to remove the black overlay that appears over your collection list image. I'd be more than happy to walk you through making this change in your store, it's great to see you are wanting to optimize your images for your customers.

Custom CSS is required to make this adjustment on your collection list. Coding is definitely an area that can be quite complicated if you have not had any previous experience but we are here to ensure you receive the right support and put you in touch with those who can help! Shopify has paid experts who will complete custom coding and in-depth customizations for your store for an agreed fee between you both, they are fantastic at helping you achieve what you're after. Click here to find out more about hiring a Shopify Expert.

If you felt comfortable editing your theme code please follow along with the steps below:

If you want to remove the overlay, you can go to Online Store > Themes > Actions > Edit Code. You will want to go into your snippets folder and find collection-grid-item.liquid. Around line 38 you will see this piece of code:

 <div class="collection-grid__item-overlay grid__image" style="background-image: url({{ collection_image_url }})">
    </div>

    <div class="collection-grid__item-title--wrapper">
      <span class="collection-grid__item-title"> 

This is what tells us where to look in the CSS. We know now to look for the grid_item-overlay. If you now open your theme.scss and search for 'overlay' you will find around line 2993 this code:

.collection-grid__item-overlay {
    position: relative;
    @include transition(all 0.8s ease);

    &:after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      opacity: 0.25;
      background-color: #000;
      @include transition(all 0.8s ease);

You can update the opacity for the overlay here. If you bring that to 0.0 like this below, it will remove the dark overlay effect.

 .collection-grid__item-overlay {
    position: relative;
    @include transition(all 0.8s ease);

    &:after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      opacity: 0.0;
      background-color: #000;
      @include transition(all 0.8s ease);

The next piece of code to update is what happens on the mouse over or hover. That line of code is directly under the code pasted above. It looks like this:

.lt-ie9 & {
        display: none;
      }
    }

    &:hover,
    &:focus {
      @include transform(scale(1.03));

      &:after {
        opacity: 0.5;

To update the hover over overlay you will want to change the opacity to 0.0 again.

opacity: 0.0;

As you continue to customize your theme, it’s a good idea to make design and content choices that help to keep your online store accessible. I suggest taking a look at this guide for tips on providing an inclusive experience for your customers.

Let us know how you get on with the steps above, I’m happy to answer any questions you think of as you work on your business.

Cheers!

[MS-WEB-DESIGNER]

Dear @AnaEB 

Please share the store url and screenshot.

[Tierany119]

I struggled with this for weeks. Thanks for your help.

[Moira]

My pleasure! I am glad we were able to provide a solution for you, thanks again for posting in the community! Don't hesitate to reach back out if you require any further assistance as you continue to work on your store. 

TIP: I thought I would also drop you the link to Shopify Compass - Business e-Learning and Training. Not enough merchants know about this and it's such a good resource for you and your business no matter where you are with your store. I’d definitely recommend bookmarking it and checking it out when you have time.

All the best,