Cannot Remove Grey Overlay

[Bearback]

Hello!

I'm using the free theme "Venture" and I have a 4 "Multiple Link Blocks" in a row on my site, bearbackgear.com towards the bottom of the page. They all over a grey overlay on them and I have been looking up and trying to play around with no to turn that off with no luck.

This is my code from just the "Links and Buttons" section (which I am assuming this issue is within here though I could be wrong):

If someone could PLEASE let me know how to fix this it would be greatly appreciated!! 

/*================ #Links and Buttons ================*/
.btn,
.rte .btn {
  display: inline-block;
  width: auto;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  @include user-select();
  @include prefix(appearance, none, webkit moz spec);

  // Set primary button colors - can override later
  background-color: $color-btn-primary;
  color: $color-btn-primary-text;

  &:hover {
    background-color: $color-btn-primary-hover;
    color: $color-btn-primary-text;
  }

  &:active,
  &:focus {
    background-color: $color-btn-primary-active;
    color: $color-btn-primary-text;
  }

  &[disabled] {
    cursor: default;
    color: $color-disabled-border;
    background-color: $color-disabled;
  }

  .icon {
    fill: currentColor;
    path: currentColor;
  }
}

.btn--secondary,
.rte .btn--secondary {
  @extend .btn;
  background-color: $color-btn-secondary;

  &:hover {
    background-color: $color-btn-secondary-hover;
    color: $color-btn-secondary-text;
  }

  &:active,
  &:focus {
    background-color: $color-btn-secondary-active;
    color: $color-btn-secondary-text;
  }
}

.btn--secondary-accent {
  border: 1px solid $color-btn-secondary-accent;
  color: $color-btn-secondary-accent;
  background-color: $color-content;

  &:hover {
    border: 1px solid $color-btn-secondary-accent-hover;
    color: $color-btn-secondary-accent-hover;
    background-color: $color-content;
  }

  &:active,
  &:focus {
    border: 1px solid $color-btn-secondary-accent-active;
    color: $color-btn-secondary-accent-active;
    background-color: $color-content;
  }

  &[disabled] {
    border-color: $color-disabled;

    &:hover,
    &:active,
    &:focus {
      background-color: $color-disabled;
      color: $color-disabled-border;
    }
  }
}

[KetanKumar]

@Bearback 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[Bearback]

Hello Ketan,

Thank you for your support. My site is bearback-gear.myshopify.com. 

- Ray 

[KetanKumar]

@Bearback 

Thanks for store url

can you please give me screenshot further issue 

[Bearback]

Hello!

The screenshot is attached. These are the multiple link boxes and I have 4 rows of these with 4 images in each section. They all have a grey overlay on them and I am unsure how to stop that from showing. It does it when hovering and when not hovering.

Thank you,

Ray  

[KetanKumar]

@Bearback 

Thanks for clear

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.link-block:after, .link-block:hover:after, .link-block:hover:focus{opacity: 0;}

[Bearback]

You fixed it!!! Thank you so so so so much!!!

[KetanKumar · Accepted solution]

@Bearback 

it's my pleasure to help us

[ThomasBaxter]

Hi Ketan. I am having the same issue for Brooklyn theme. I paste in code but still no fix. Please help?

[KetanKumar]

@ThomasBaxter 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.