How to hide the block from hover (display:none) after the css animation so that it looks nice?

Question

css

Hello,
I ran into a problem:
When you hover over a label to the right of it, a block appears, how to make this block display none, then when you hover it appears animatedly and then when the cursor leaves this block or mouse, it should disappear animatedly and then go to display: none.
example here: map-8f9f12.webflow.io
Video why I need to do this: https://dl.dropbox.com/s/tzzw91b2i58o1ic/map-marker.mp4
(the block does not disappear and therefore reappears when hovering over it)

Answer 1

Set the block: when it is hidden. When he appearspointer-events: none;pointer-events: auto;

Answer 2

Decrease opacity from 1 to 0, when it reaches 0 set display:none.