# CSS z-index hover asymmetrical elements

**URL:** <https://forum.kirupa.com/t/css-z-index-hover-asymmetrical-elements/643354>\
**Category:** Uncategorized\
**Created:** [June 24, 2020, 8:24pm UTC](https://forum.kirupa.com/t/css-z-index-hover-asymmetrical-elements/643354 "2020-06-24T20:24:26Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Helena\_G](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/helena_g/32/11549_2.png) [@Helena\_G](https://forum.kirupa.com/u/Helena_G)\
**Post date:** [June 24, 2020, 8:24pm UTC](https://forum.kirupa.com/t/css-z-index-hover-asymmetrical-elements/643354/1 "2020-06-24T20:24:26Z")

</div>

Hello. I have a question about this website [https://it-agency.netlify.app/](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](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/4/442b54873722520f28dad4805a9c65850b0eaa13.jpeg)

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [June 24, 2020, 8:43pm UTC](https://forum.kirupa.com/t/css-z-index-hover-asymmetrical-elements/643354/2 "2020-06-24T20:43:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Helena\_G](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/helena_g/32/11549_2.png) [@Helena\_G](https://forum.kirupa.com/u/Helena_G)\
**Post date:** [June 28, 2020, 1:03pm UTC](https://forum.kirupa.com/t/css-z-index-hover-asymmetrical-elements/643354/3 "2020-06-28T13:03:04Z")

</div>

Thank you, @senocular, for your precious advice.