slide up heart menu and tilt on hover

<!--- some random code i found in my old pastes HAHA no credit for me cuz i think the original code belongs to someone else --->

<style>

@font-face {
font-family:'heart';
src: url(https://dl.dropbox.com/s/3obmncth4fhmduq/HEARRG__.TTF);

}

#cont {
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
display: block;
margin-left: auto;
margin-right: auto;

}

.img {
width: 100%;
height: 100%;
object-fit: cover;
overflow: hidden;
display: inline-block;


}

#cont img {
transition: transform .5s;
}

#cont:hover img {
transform: scale(1.25) rotate(10deg);
transform-origin: 50% 50%;
webkit-filter: blur(.5px);
filter: blur(.5px);

}

#numbers {
position: absolute;
bottom: -50px;
border: 2px solid black;
border-radius: 18px;
background: white;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
left: 46px;
transition: .8s ease;
}

#numbers a{
text-decoration: none;
font-family:'heart';
letter-spacing: 2px;
color: #9f6fd9;
font-size: 1.5em;
 text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;

}

#numbers a:hover{
webkit-filter: blur(0.5px);
filter: blur(2px);
color:#46cacf;
transition:all .5s ease-out;

}

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

#cont {
-webkit-mask-image: url(https://i.imgur.com/bIX4M8u.png);
-webkit-mask-size: 90%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;


}

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

</script>

<div id="cont">


<img class=img src="https://i1.sndcdn.com/avatars-gHJS8dlroYGt6yZ0-En8PgA-t500x500.jpg">

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


</div>