Help with interaction for background layer in section

Hi there,

I’m using these images as the background layer for various sections on the homepage of the site im working on and I currently have a top layer over the background to give it a darker, faded look to the image. I want for the image to return to normal when you hover over it, so that the photo goes from going darker to in perfect exposure.

I noticed a similar topic about this in this post, but couldn’t seem to get it right: Change background upper layer opacity on hover

Do I just need to swap out the RGB values with this particular coding in the elements tab or do I need to put this coding in the section’s Custom CSS?

Thanks!

Hello Tyler,

Thanks for writing to us.

To change the overlay color on hover you need to add custom CSS code, you need to go to the Cornerstone page builder—>Section—>customize—>Edit CSS

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

Please have a look at the given screenshot given below.

The purpose of providing the custom CSS 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.

Hope it helps.
Thanks

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.