Brooklyn Theme : How to remove gray overlay from collection thumbnails?

Lindsay_Boswell
New Member
1 0 0

Using the Brooklyn theme and love it except that I cannot figure out how to remove the gray overlay from my collection thumbnails? Is there a way to make the overlay translucent and then change the collection font color from white to black? 

Replies 8 (8)
Melo
New Member
15 0 0

Also interested in it, think Pros help us 

Joe_C2
Tourist
6 0 3

Hi Lindsay,

To do this, hop into the HTML/CSS editor by choosing it using the button of three dots next to the Customize Theme button in Online Store -> Themes.

In the file structure on the left, open the Assets folder and then enter the theme.scss.liquid file. Press Ctrl/Cmd + F to search and search for '.collection-collage__item-wrapper' (minus the apostrophes). You should see something like this:

.collection-collage__item-wrapper {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;

  .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);

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

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

      &:after {
        opacity: 0.5;
      }
    }
  }
}

The part you're looking is inside the first &:after section. Play around with the opacity and background colour values until you're happy.

 

Hope this helps, any further questions, let me know!

Joe

Mircea_Piturca
Shopify Partner
1493 42 320

The "gray outline" is an ":after" pseudo element. In your css look for ".collection-grid__item-overlay:after". Right now the color is set on black: "background-color: #000;" with an opacity of 0.25.

That is what you need to change.

As for the font color you can add a css transition. Something llike this:

.collection-grid__item-title {
  transition: color 0.8s ease;
  color: #fff;
}

.collection-grid__item-title:hover {
  color: #212121;
}

 

Finally—Add variant descriptions to your products
Dipti_Dedhia
Tourist
7 0 2

Has anyone tried to do this recently? I can't seem to figure out how to get rid of the gray background in the thumnails. I tried everything suggested above with no luck!

 

Dipti_Dedhia
Tourist
7 0 2

FOUND IT! If you're looking at the theme post 10/13/16 this is how you get rid of it:

Look for and delete this code:

  background-color: $colorProductBackground;
  @include transition(opacity 0.4s ease-out);

 

MCOFA
Tourist
7 0 1

... and the "Control F" info is good stuff too!