Elements darkened by background overlay

[syarahmadi]

My background image overlay is working great, but the buttons over the background image are also darkened which makes the white buttons look gray when hovered over. Is there a way that I can have this same overlay on the background image, but not include the buttons in each of the two columns?

Eyelash Extensions in Alameda, CA - The AfterLash

[friech]

Hi There,

Thank you for writing in, that is because you applied the brightness filter directly on the section so the button is affected. Lets apply the brightness filter to the bg-image itself only. Please update your code to this:

.home-lashes:hover .x-bg {
	-webkit-filter: brightness(50%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

Hope it helps,
Cheers!

[syarahmadi]

@friech

.home-lashes:hover .x-bg {
-webkit-filter: brightness(50%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

Perfect! Thank you!!

[paul.r]

On behalf of my colleague, you’re welcome. Cheers!