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

Solved
AnaEB
Tourist
7 0 1

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!

0 Likes
Pallavi
Shopify Expert
2196 357 469

Hello There,

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

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
Moira
Shopify Staff
Shopify Staff
85 17 18

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

Moira | Social Care @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog

MS-WEB-DESIGNER
Shopify Partner
2803 175 470

Dear @AnaEB 

Please share the store url and screenshot.

0 Likes
Tierany119
New Member
2 0 0

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

0 Likes