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

Highlighted
Excursionist
28 0 1

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

0 Likes
Highlighted
Shopify Staff
Shopify Staff
1017 97 217

Hey there, Dhanesh!

Bo here from Shopify Support.

That is a really great question. I reached out to the themes team to find out how to best do this.

NB When editing the CSS of your theme it is always a good idea to duplicate your theme first and making the changes on the duplicate. This will prevent any errors from occurring on your live site. We also recommend adding CSS to the bottom of the file as opposed to altering the preexisting code. The new code will overwrite the previous code

  • Go to Online Store > Actions > Edit Code.
  • Open the Assets folder and click on theme.scss.liquid.
  • Scroll to the bottom of this page and add the following code:
.collection-collage__item-wrapper .collection-grid__item-overlay:after {
opacity: 0;
}
  • Click Save.

Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!

All the Best,
Bo

Bo | 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

1 Like
Highlighted
Excursionist
28 0 1

Thanks, it worked

0 Likes
Highlighted
Tourist
7 0 2

Hello Bo! @Bo

 

I also have an issue with my featured collection images on the home page of my Brooklyn theme. I wanted to add hover effect and added below code to the bottom of my theme.scss.liquid and it worked but not it has a white overlay?or extreme transparenct on all images. I can barely see the image. 

How can I fix this? 

 

Many thanks in advance.

my url: https://lookmonk.com/?fts=0&key=ce98c38ad71b787e33b0991c728c413cb918239982241ce11099c6328f912286

 

/* ===============================================
// Reveal module
// =============================================== */

.reveal .hidden { display: block !important; visibility: visible !important;}
.product:hover .reveal img { opacity: 0; }
.reveal { position: relative; }
.reveal .hidden { 
  position: absolute; 
  z-index: -1;
  top: 0; 
  width: 100%; 
  height: 100%;  
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;  
}
.reveal:hover .hidden { 
  z-index: 100000;
  opacity: 1;    
}
.reveal .caption {
  position: absolute;
  top: 0;  
  display: table;
  width: 100%;
  height: 100%;
  background-color: white; /* fallback for IE8 */
  background-color: rgba(255, 255, 255, 0.7);
  font: 13px/1.6 sans-serif;
  text-transform: uppercase;
  color: #333;
  letter-spacing: 1px;
  text-align: center;
  text-rendering: optimizeLegibility;
}
.reveal .hidden .caption .centered {
  display: table-cell;
  vertical-align: middle;
}

@media (min-width: 480px) and (max-width: 979px) {
  .reveal .caption { 
    font-size: 11px; 
  }
}

footer.site-footer.small--text-center {
    font-size: 12px!important;
}

.header-wrapper {
  position: fixed;
  z-index: 1;
  background-color: rgba({{ settings.color_body_bg }}, 0.0);
  width: 100%;
}
.header-sticky .header-wrapper {
  background-color: rgba({{ settings.color_body_bg }}, 1);
  @include at-query($min, $medium) {
  .logo img{
    height: 60px;
   }
  }
  .site-nav {
      transition: all .3s ease, height .8s ease;
   -webkit-transition: all .3s ease, height .8s ease;
    -o-transition: all .3s ease, height .8s ease;
    margin-top:0 !important;
  }
}
.header-sticky .header-wrapper {
}
0 Likes
Highlighted
Shopify Staff
Shopify Staff
1017 97 217

 

Hey there, @sila-monk 

 

I would recommend that you create a new post regarding this in the Design Community to get more eyes on this. As this is custom code - I am unsure as to what has been affected to cause this side-effect. I think it would be best answered in a brand new thread. 

 

When I took a look at your link - I did not see this issue. Did you remove the code or resolve it somehow? 

 

All the Best,

Bo

Bo | 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
Highlighted
Tourist
7 0 2

Hi Bo! 

 

I haven't solved it, just switched to a debut theme that works for now. 

 

I am now building a brand new Brooklyn and trying to see where it goes wrong. After receiving some commentary from other experts I now think the issue is not a ccs but an animation issue. 

 

I am pretty new here and honestly can not find the way to start a new post :( 

 

This is my real link now: https://lookmonk.com/?_ab=0&_fd=0&_sc=1&key=ce98c38ad71b787e33b0991c728c413cb918239982241ce11099c632...

 

 

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
1017 97 217

 

Thanks for getting back to me! So, as you will probably want to ask the community questions I have put together a video on how to do so. You can check it out here.

 

I checked in with our theme team to see if they had any recommendations, they would like to take a closer look at this. To do so, I need to authenticate you as the owner of the account. I will need to email you and have you respond to that email, after this, I can escalate it to the theme team to resolve for you. What kind of hover effect are you trying to implement?  

 

If this is something you want to proceed with, let me know what email to reach out to you on! It needs to be the email you use to log in with.

 

I look forward to hearing from you,

Bo

 

 

Bo | 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
Highlighted
Tourist
7 0 2

Hi Bo!

 

My stubborness actually worked and I solved the problem on my own. I realized while copy pasting the new code I had removed a piece of valuable data off the sheet.

 

By studying the code of the original, I could locate the issue and fix it :) 

Feel super accomplish as it is not much shorter than a miracle for a novice like myself.

 

Many thanks for your help!

 

Cheers,

 

SILA

1 Like
Highlighted
New Member
2 0 0

Hi Sila, 

 

I was wondering if you could help me identify which code you accidentally removed?

 

I am also on Brooklyn and seem to have trouble with the hover effect, whilst following the tutorial on github.

 

Any help would be greatly appreciated!

 

0 Likes
Highlighted
New Member
1 0 0

IT DOES WORK GOOD LOOK FAM

0 Likes