Archived topic

container background change on hover

5 replies · Started by Christopher on August 25, 2022

Viewing posts 1–6 of 6

August 25, 2022 at 12:58 am #2323184

Hey guys,

Ive got some containers with a simple link on it:
https://www.screencast.com/t/4N55vK5M

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!

August 25, 2022 at 1:04 am #2323192

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;
}

August 25, 2022 at 1:10 am #2323196

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?

August 25, 2022 at 1:15 am #2323198

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

August 25, 2022 at 1:51 am #2323226

great, thanks! Looks perfect now.

have a good day!

August 25, 2022 at 5:01 pm #2324063

You’re welcome Christopher!

This archived topic is closed to new replies.

Start building better websites today.