Контент прыгает при наведении ⇐ CSS

[Anonymous]

Код: Выделить всё

body {
background-color: #666e8e;
margin: 3rem;
}

#testlink {
text-decoration: none;
}

#testlink:hover .titles {
color: #3c2301;
background: linear-gradient(#7bcfd7 25%, #D2B48C 75%);
}

.test {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: auto;
height: 150px;
background: linear-gradient(#e97e7e 25%, #3bcee5 75%);
border-radius: 0% 0% 0% 0% / 0% 0% 0% 0%;
color: white;
box-shadow: 20px 20px rgba(0, 0, 0, .15);
transition: all .8s ease;
margin: 15px;
}

.test1:hover .description {
display: block;
pointer-events: auto;
}

.test:hover {
border-radius: 0% 0% 90% 90% / 0% 0% 45% 45%;
box-shadow: 10px 10px rgba(0, 0, 0, .25);
width: auto;
height: 450px;
display: flex;
justify-content: center;
align-items: normal;
}

.description {
display: none;
position: relative;
bottom: 400px;
left: 0;
width: 90%;
padding: 0px;
margin: 0px;
box-sizing: border-box;
text-align: center;
pointer-events: none;
}

Код: Выделить всё

[url=https://youtube.com]
Testing Box
[/url]
Test description

вот в чем проблема
Я пытался заставить его просто отображать текст, но он продолжает делать сброс.
Я пробовал изменить позиции на абсолютные, просто вынуть описание из div и использовать собственный CSS-код, но все, что у меня есть пробовал, не помогло

Подробнее здесь: https://stackoverflow.com/questions/781 ... g-on-hover