Changing Z-index upon hover?

[n3tworth (Nikol' Moira)]

Hi,

Is it possible to change the z-index of an element, whereby changing an element’s position in a stack, upon hover?

I’d like an element to move from the back to the forefront upon hover.

I have tried this using the element’s hover state in style but the desired effect is not rendered.

I’m not sure how to manipulate an element in 3D Space using the hover interaction so maybe that will do the trick?

Any help is appreciated!

(the site has sensitive subscriber information so I can’t publicly share it but am willing to share it to a sole individual with the right solution)

[StuM]

Hi @n3tworth

Something like this: 100 - hover over the numbers ?

Desktop only at the moment!

Let me know

Stu

[garymichael1313 (G.J.)]

So yes… You can create 1 div… Give it a class then set it to ‘Display: Inline Block’… style it with size and color. Go to states, click to hover… change background, add box shadow, give a transform to scale 1.02, go to z-index add 5.

That would set your hover so you can test it directly on canvas. Then simply copy that box and add combo class like (A) or (2)… something simple… change what you want for colors, etc… and repeat. Done.

[n3tworth (Nikol' Moira)]

Yes! That’s fabulous work…how’d you do that? Minus the skew for mine of course…

[n3tworth (Nikol' Moira)]

Ahhhh ‘inline block’ is the magic button lol - that’s where I find manipulation of z-index. That helps IMMENSELY, thank you!

[garymichael1313 (G.J.)]

Yep… because that positioning will allow the object to have a property… with auto it’s not needed. Glad to help… Have fun!

[StuM]

I’ll say to follow @garymichael1313 great advice on this one - saves me typing!

Let us know if you get stuck!

Stu