Appearance of a div when hovering over a block with a transition property?

Question

css

.block-2{
width: inherit;
height: 200px;
display: none;
transform: translateY(-200px);
background: rgba(0,0,0,.8);
transition: all 0.5s ease 0s;
}
.block-1:hover .block-2{
display: block;
transform: translateY(0px);
} It is
necessary that block 2 descends smoothly from block 1
, it is impossible to make it descend smoothly and so that during the descent it does not go beyond the first block

Answer 1

codepen.io/Geyan/pen/dXmrPL?editors=110 right?

Answer 2

codepen.io/beatmaker/pen/mExPQO
like this
only with the display property
and so that the block does not stick out on top,
remove the comments in css and see how it should be