Streaming live at 10am (PST)

Smooth z index transition


I was wondering if there was a way to transition smoothly from one z index to another. For example, there are two squares overlapping each others. The squares would change z index and move forward when hovered. Instead of transitioning abruptly, would it be possible to to fade over the other square? Hope this makes sense.

You can do this with a duplicated version of the element pretty easily. Just create another version of the element you want to transition above, make it visible (but 100% transparent), then fade the opacity to 100%. I threw together a quick and dirty example that you can see live here, and the read-only link can be found here.

Depending on your situation the duplicate element may not be an issue, especially if any containing content isn’t shown.

1 Like

This is perfect, thank you!