menu yeag

<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">

<!--art credit goes to ichigo_town on instagram-->

<style>

#cont {
width: 200px;
border-radius: 5px;
margin:auto;
height: 200px;
border: 4px double #000;
position: relative;
overflow: hidden;

}

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

}

#numbers {
position: absolute;
bottom: -50px;
border: 3.75px double #000;
border-radius: 5px;
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: #F8BEB2;
font-size: 1.5em;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;

}

#numbers a:hover{
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
color: #fff;
font-style: italic;
}

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

</style>

<div id="cont">

<img class=img src="https://cdn.discordapp.com/attachments/849194778729381889/872366441234583572/miya.png">

<div id="numbers"> <a href="#i">0</a> <a href="#ii">01</a> <a href="#iii">02</a> </div>

</div>