Streaming live at 10am (PST)

Funky Z-Index Radio Button Hover Out


#1

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


#2

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?


#3

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:


#4

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.