Cannot Remove Grey Overlay

Solved
Bearback
Tourist
8 0 3

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
Shopify Partner
15899 1753 5849

@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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Bearback
Tourist
8 0 3

Hello Ketan,

 

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

 

- Ray 

0 Likes
KetanKumar
Shopify Partner
15899 1753 5849

@Bearback 

Thanks for store url

can you please give me screenshot further issue 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Bearback
Tourist
8 0 3

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.Screen Shot 2021-02-24 at 6.05.25 PM.png

Thank you,

Ray  

0 Likes
KetanKumar
Shopify Partner
15899 1753 5849

@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;}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Bearback
Tourist
8 0 3

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

KetanKumar
Shopify Partner
15899 1753 5849

This is an accepted solution.

@Bearback 

it's my pleasure to help us

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing