[Resolved] container background change on hover

[Christopher]

Hey guys,

Ive got some containers with a simple link on it:

I already made the entire container clickable with an older thread I found here. Now I try to change the background color on hover to a slightly darker color of my background.

I tried adding this code, but must be doing something wrong, can you help me fixing the hover code?

.gb-container.linked-container a:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
}
.gb-container.linked-container:hover .gb-headline.linked-container {
    background: red;
    color: white;
}

PS: The red and white are just examples, took this code from another thread here as well. Will change the actual color afterwards.

Thanks!

[Fernando]

Hi Christopher,

You can try this code instead:

.gb-container.linked-container:hover .gb-headline {
    background-color: #ff0000;
    border-color: #000;
}

.gb-container.linked-container:hover .gb-headline a {
    color: #fff;
}

[Christopher]

Thanks! That was fast 🙂

Looks good so far: https://www.screencast.com/t/KDKwoFvejIsZ

Maybe I should also add a white color for the frame, how would that code look?

[Fernando]

I modified the code above, and added a border-color rule. You can modify the color code of that as well to your preference.

[Christopher]

great, thanks! Looks perfect now.

have a good day!

[Fernando]

You’re welcome Christopher!

[Author]

Posts