As you can see, at the bottom of the site there’s 4 red cards than when hovered they “pop up”. The problem is, it seems the right cards are ABOVE the left ones, as in the order in the layout. I already tried putting the Z index of the class to a number so they are on the same level but still, no good.
I want them to be on the same level, sorry if I didnt explain myself correctly.
Hey @sadok
If I read your question correctly, what you want is to have the hover state of the left cards be above the right cards when you hover.
Here’s how:
Change the z-index in normal state to 0 and hover state to 1.
The higher the z-index, the greater the priority it has to be on top (an element with a z-index of 9999 will always be on top of one with a z-index of 50).
However, there’s something still bothering me. As you can see, if you hover on either of the left cards, there’s a slight moment when it looks like they are rising from BELOW the right cards. The shadow from the right cards also bleeds on top on the left cards.
Is it possible to make them all the same level/depth? As in, no shadow bleeds because they are all on the same level, and when hovered, they pop up without passing through another card.
