Docs

[joel820]

Hey guys,

Im using latest Wp integrity stack 7 and cornerstone.

Is it possible to create a dark overlay on a background image when the mouse hovers over it – light the effect in the portfolio or blog? And then customise opacity etc. the text lay should remain on top and unchanged.

website: http://tst.swedwise.com

Enclosed screenshot of image i want to apply overlay to and how.

Hope you can help me out.

Joel.

[Rue Nel]

Hello Joel,

Thanks for writing in!

To create a dark overlay on a background image when the mouse hovers over it, please edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

.x-section.bg-image {
    overflow: hidden;
    position: relative;
}

.x-section.bg-image:after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-color: transparent;
    transition: background-color 100ms linear;
}

.x-section.bg-image:hover:after {
    transition: background-color 100ms linear;
    background-color: rgba(0,0,0,0.5);
}

If you want it to work in all your pages, please add the following css code in the customizer, Appearance > Customize > Custom > CSS instead.

We would loved to know if this has work for you. Thank you.

[joel820]

Hey!

Thanks for your super quick reply.

I pasted the above into the strings/custom css

the image overlay effect worked but it makes the text layers (custom header, text, button) darker too. How do I get the text layer above (not effected by this effect)?

/Joel

[Rue Nel]

Hi Joel,

To make the text layers in front of the overlay, please add this code:

.x-section.bg-image .x-container {
    z-index: 10;
}

Hope this helps. Kindly let us know.

[joel820]

it works! thanks millions guys 🙂

/Joel

[Thai]

Glad it worked 🙂

If you need anything else, please let us know.

[Author]

Posts