Появление div при наведении на блок с свойством transition?

Question

[Никита Тригуб]

.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);
}




Нужно чтобы блок 2 опускался плавно из блока 1
не получается сделать так чтоб опускался плавно и чтоб во время спуска не выходил за пределы первого блока

Answer 1

[Никита Тригуб]

codepen.io/beatmaker/pen/mExPQO
вот так
только со свойством display
и чтоб не торчал сверху блок
уберите коменты в цсс и увидете ка кдолжно быть