Hover animation - block drop, how to do?

Question

css

It looks like this:

On hover, the following happens:

All this is natural under the transition, slowly appears (the top red block on top falls out like a sticker)

How to do this?
Here's what I got:

On hover:

Everything is crooked and not smooth

Code:


https://codepen.io/barbarossa356/pen/mdrYrNm?edito...