Section background overlay darkens when the cursor hovers towards the headline

[Nalwi]

Hi, currently my website has a section with a video background that has an overlay over it, as well as a headline in the middle. I would like to have the section’s video background overlay to darken while the cursor moves closer towards the headline or button.

Please see the secure note for more details.

[tristup]

Hi Nalwi,

Thanks for reaching out.
You need to add a few custom CSS and JavaScript codes to acheive what you are expecting. At first, you need to remove the background color from the Upper BG Layer of the section as shown in the screenshot.

Then you need to add the following custom CSS class with the same background color into the Theme Options > CSS.

    .dark
    {
        background-color:rgba(36, 19, 69, 0.75) !important;
    }

And then you need to add the following custom JavaScript code into the Theme Options > JS.

    jQuery("#ptag").on('mouseover',function()
    {
        jQuery(this).closest('.x-section').find('.x-bg-layer-upper-color').addClass('dark');
    });  
    jQuery("#ptag").on('mouseout',function()
    {
        jQuery(this).closest('.x-section').find('.x-bg-layer-upper-color').removeClass('dark');
    });   

Please remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks