Column Upper Level Color change on Hover

[Stephenk]

Hi, is it possible to achieve a similar effect found on my bank’s website?: https://www.advantiscu.org/loans/mortgage-center …halfway down the page, on the images. It turns a nice blue/turquoise. Not sure how to do this using the new Pro functions, except by using css markup:
$el:hover .x-bg-layer-upper-color {
background: rgba(5, 146, 146, 0.73) !important;
}
.
Is this possible using the new functions? Or could you put it in a future release? Effects>Interaction>Filter>Type> (New drop down item “Colorize”)…? Maybe I’m missing something that’s already available. Any suggestions would be greatly appreciated. Cheers!

[marc_a]

Hi @Stephenk,

Thanks for reaching out.

Yes, this is doable without using custom CSS. Please check this previous thread and this can be applied in both Pro and X theme.

Images with hover overlay

Hi @Jennine, Please follow the instructions below on how to create an image with hover overlay text: 1.) Enable the Advance Mode https://theme.co/docs/advanced-mode 2.) Add a section and columns, on my example I choose 3 columns 3.) Add a background image to each column 4.) Then add the button element 5.) Make the width of the Button 100% 6.) Remove the border-radius and Box shadows of the button 7.) Adjust the padding of the button to fill everything on the column height 8.) Use Intera…

Hope that helps.

Thank you.