Archived topic

Card image darken on hover

5 replies · Started by Paul on March 5, 2022

Viewing posts 1–6 of 6

March 5, 2022 at 8:08 am #2143507

Hi, how can I structure containers so only the image darkens on hover as here:
https://www.apple.com/uk/newsroom/

I know a brightness filter will produce the same effect but when I have the parent container linked I'm struggling on how to darken only the image itself.

Thanks,
Paul.

March 5, 2022 at 9:10 am #2143562

Hi there,

can you share a link to your site where you want it applied?

March 5, 2022 at 10:04 am #2143608

Hi David,

Test site is linked below.

Thanks,
Paul.

March 5, 2022 at 10:10 am #2143615

Try this CSS:

.nerccu-card:hover:before {
    filter: brightness(50%);
    transition: filter 0.3s ease-in;
}

Or if you have GB Pro you can use the Effects panel to do the same thing.

March 5, 2022 at 11:26 am #2143710

That's perfect! How do I replicate the hover only affecting the image GB Pro? I have that installed :)

March 5, 2022 at 11:27 am #2143712

Can you open a ticket here?
https://generateblocks.com/support/

Thanks :)

This archived topic is closed to new replies.

Start building better websites today.