menu section on hover

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap" rel="stylesheet">

<style>

#cont {
width: 200px;
height: 200px;
border: 4px double black;
position: relative;
overflow: hidden;

}

.img {
width: 100%;
height: 100%;
object-fit: cover;

}

#numbers {
position: absolute;
bottom: -50px;
border: 4px double black;
background: white;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
left: 10px;
transition: .5s ease;
}

#numbers a{
text-decoration: none;
font-weight: bold;
font-family: 'Berkshire Swash', cursive;
color: #CC554A;
font-size: 1.5em;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;

}

#numbers a:hover{
color: #fff;
}

#cont:hover #numbers {
bottom: 10px;
}

</style>

<div id="cont">

<img class=img src="https://cdn.discordapp.com/attachments/830692724108951562/885850865787871242/image0.jpg">

<div id="numbers"> <a href="#">00</a> <a href="#">01</a> <a href="#">02</a> </div>

</div>