Archived topic

Overlay on Dynamic background

7 replies · Started by Samuel on May 19, 2022

Viewing posts 1–8 of 8

May 19, 2022 at 10:26 am #2225826

I used to add the famous click-container class that David gave us to add an overlay to a container on hover.

I'm testing the alpha GB new release and playing with dynamic content but it seems that adding this class to the container with a dynamic background image is not working.

Is that normal ?

Thanks,
Sam

May 19, 2022 at 3:28 pm #2226020

Hi Samuel,

I'm not sure GP has a built-in class called click-container.

Did David gave you the CSS associated with the class as well?

May 19, 2022 at 10:58 pm #2226194

Hi,

No it's not a built-in class,

.click-container {
    position: relative 
}
.click-container a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.click-container a {
color:#fff;
}
.click-container:hover {
background-color:#ddd !important;
}

It's working on a GB container with a classic background image, but it's not with a dynamic background image.

May 20, 2022 at 2:40 am #2226362

Hi there,

can you share a link to a page where i can see the issue ?

May 20, 2022 at 2:51 am #2226373

Hi David,

You'll find link in private info

May 20, 2022 at 4:12 am #2226478

Instead of this CSS:

.click-container:hover {
    background-color:#ddd !important;
}

The simplest option here is to adjust the :before elements ( which has the background image ) opacity:

.click-container:before {
    transition: opacity 0.3s ease-in;
}
.click-container:hover:before {
    opacity: 0.5;
}

Then if you add a background-color to the Container Block it will show through.

May 20, 2022 at 4:21 am #2226488

Thanks David !

May 20, 2022 at 5:09 am #2226523

You're welcome

This archived topic is closed to new replies.

Start building better websites today.