CSS transition scale out not working correctly

HTML & CSS
1

I’ve got a fiddle of what I’m working with: https://jsfiddle.net/0cLj16c3/

If you hover over one of the colors, you can see that it scales and eases in and out. The hover part works fine. It’s the off hover that’s not working. If you hover and then move your mouse off the color, you can see that on the right hand side of the color that you hovered over, the color that’s directly to the right of the one you hovered immediately overlaps the one you hovered after you move your mouse off. I would expect it to react like the left hand side once you move your mouse off the color. It doesn’t immediate overlap.

Any ideas what I can add here to fix this?

2

It loses the z-index property as soon as the hover ends. Because there is no z-index set in the default state, there can be no transition, so it just snaps off. Add a z-index value to the default state.

1 Like
3

Ah… wow. That seems quite obvious now. Little embarrassing, actually. lol. Thank you, I appreciate it!

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.