Funky Z-Index Radio Button Hover Out

Hey everyone,

I’ve customized some radio buttons to have a grow on hover. The issue I’m running into is that when I hover-out, the z-index returns into normal and the other radio button squares are overlapping the radio I just hovered over. I made a video to help explain it better.

Any ideas on how I can solve this small issue?

Demo


https://preview.webflow.com/preview/kylemillercreative?utm_source=kylemillercreative&preview=4430a0cf3ffc14715d987194b0df8e1d

Have you tried making each radio box a different class? So that you can make every radio box’s interactions is upon elements rather than classes. I’m not sure if it’ll work or not but maybe it’ll work?

Hey Nazrin,

Sounds like an interesting solution. I think the issue is the resting z-index for all of them. When I hover over the radio it has a z-index higher than the other radios, but when I hover out, it goes back to the regular z-index and it causes that weird overlap. If there was a way to delay the z-index reverting back to it’s resting state then I think that would work. :thinking:

Hey Dre,

I think you can make the delay. I tried making it but it still somehow didn’t work. I put another interactions block at the Project Type Out that only has the z-index going back to normal with a very high delay but still doesn’t work. Maybe there’s more fondling needed to figure it out but I think it could work.