CSS z-index hover asymmetrical elements

1

Hello. I have a question about this website https://it-agency.netlify.app/

I have 5 asymmetrical elements (please see the screenshot). They are placed in 3 rows.

The idea was that when the user hover over one of the elements it goes on top of another element. (with css hover:z-index) And it works perfectly with the first one. But not with the third one and not with the fourth. I tried to force it with JavaScript, it didn’t work for me.

Why other elements don’t have the same behaviour as the first one in your opinion?

Thank you very much in advance for your answer.

Helena

kirupa-asymmetrical
kirupa-asymmetrical1440×1489 179 KB

2

You’re using negative z indexes which puts the images (namely #2) below other things so it cant get the hover event. Keep the images at the default (0), and if you need other things to be on top that aren’t already, change their z index to something positive, but below the hover z index.

1 Like
3

Thank you, @senocular, for your precious advice.

1 Like