How to modify image overlay color in Venture theme?

[rosegardengraph]

Every other theme I have tried, there has been the option to change the image overlay color and opacity, yet Venture does not give this option. The current overlay is extremely dark and gray! Is there a way to adjust color and/or opacity in this theme?

[dmwwebartisan]

@rosegardengraph 

Please share store URL & screenshot what do you want .

Thanks!

[rosegardengraph]

The overlay over these 4 link blocks in the top and over my collections.  In the first image, I have the first option selected so you can see how dark the overlay already is on the options are when not selected. The color behind that overlay is the exact same color as the menu bar, yet you can't tell because the overlay is so dark. The color on the second image is white but looks super dark gray because of the overlay.

[rosegardengraph]

I don't currently have this as my theme because I'm trying to fix this before publishing it, so I don't have my actual URL to share, but here's the preview URL: https://rdjjm0wwodpg1qux-55442145437.shopifypreview.com

[rosegardengraph]

@dmwwebartisan 

Sorry, forgot to tag you so that you could see the reply

[dmwwebartisan]

@rosegardengraph 

please Go to Online Store->Theme->Edit code then go to assets/theme.scss.liquid ->paste below code at the bottom of the file. 

.link-block:after {
    background-color: #fff !important;
    opacity: .8 !important;
}

Thanks!

[rosegardengraph]

@dmwwebartisan this did work! But when I put this in, then it gets rid of everything. I was okay with the overlay that just showed what item you were selecting, it's just the dark overlay when you're not even on the image that I'm trying to get rid of. With this code, both the regular overlay and selection overlay go away. Is there a way to just make the random dark overlay on the color go away without making the standard selection overlay go away too?

Thank you so much!!

[rosegardengraph · Accepted solution]

Okay, I ended up figuring this out myself after spending hours figuring out the code. So for anyone reading in the future, here's what you do.

The above steps will work if you want to get rid of the "selection" or transition overlay. To have full range of customization though, you can do the steps below.

Go into your theme.scss.liquid and ctrl + f and look for ".link-block".

Should see a style like this:

.link-block {
position: relative;
display: block;
@include display-flexbox();
justify-content: center;
padding: 20px 20px;
text-align: center;
flex: 1;
background: {
size: cover;
position: top center;
}

&:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: $color-fixed-black;
opacity: 0.8;
transition: opacity 0.2s ease;
z-index: 1;

 
Or something close to that. I don't remember what my numbers were before as I've changed them now.

Anyway, it's this part that's important

background-color: $color-fixed-black;
opacity: 0.8;
transition: opacity 0.2s ease;

Or whatever your exact numbers say. So first off, you can change the $color-fixed-black to $color-fixed-white if you'd rather have a white button overlay, which I did.

The regular opacity over the buttons is the top number. I set mine all the way down now to 0.2. You can make it anywhere from 0 to 1 though.

The transition opacity was the one I kept referring to as the "selection" opacity, basically showing that you're about to click an option. You can also set it from 0 to 1 per your preference.