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
2351 394 508

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
213 38 38

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
2877 180 493

Dear @AnaEB 

Please share the store url and screenshot.

Click Here to Hire Shopify Store Customization Experts
Boost Conversions & Average Order Value with this
Best App for Sticky Add To Cart
0 Likes
Tierany119
New Member
2 0 0

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

0 Likes
Moira
Shopify Staff
Shopify Staff
213 38 38

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,

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

0 Likes