Make column background darken but leave text alone

[AACT]

Hello, trying to simply make the rollover state of these 3 columns darken but leave the text as is. When I apply a filter to the column, it affects the whole column. I have a grayscale filter on now but the image doesn’t darken enough for the clients needs: https://aacofctstage.wpengine.com/

Thanks much

[ruenel]

Hello Leon,

Thanks for posting in!

You should be putting your background images to the lower layer and then use a semi transparent color for the upper layer.

Kindly let us know how it goes.

[AACT]

Hi thank you I am looking for it to darken on rollover, so I set the lower to the image, upper to a color, how can I make that color darken on rollover? thanks as always

[prakash_s]

Hello Leon,

To change the column upper layer background color on hover I would suggest you add this custom CSS code Column —>Customize —>Element CSS

$el.x-col:hover .x-bg-layer-upper-color {
    background-color: rgb(5 5 5 / 79%) !important;
}

Please feel free to change the background color as per your design. The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.In case if you have no idea about coding you can subscribe to One where customization questions are answered.

Hope it helps.
Thanks

[AACT]

This is perfect, super helpful as always

[prakash_s]

Hello Leon,

Glad that we were able to help you. Please feel free to open a new thread if you have any more concerns.

Thanks