This cool menu!

<style>
@import url('https://fonts.googleapis.com/css2?family=Kosugi&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Tahoma", sans-serif;
transition: 1s cubic-bezier(0.59, -0.43, 0.17, 1.16);
}

a {
color: white;
}
a:hover {
color: white !important;
transition: .5s ease;
}

@font-face {
font-family: "Tahoma";
src: url(https://www.dropbox.com/s/zdfnudw693k5pih/TAHOMAB0.TTF);
font-weight: bold;
}
@font-face {
font-family: "Tahoma";
src: url(https://dl.dropbox.com/s/4s49asm1zaa91yx/TAHOMA_0.TTF);
font-weight: regular;
}

figure {
border: 1px dashed white;
width: 350px;
margin-left: auto;
margin-right: auto;
border-radius: 8px;
position: relative;
pointer-events: none;
background: #000;
transition: 0.3s ease-in-out;
}

figure .img {
width: 100%;
height: 200px;
border-radius: 8px 8px 0 0;
background: url("https://s5.gifyu.com/images/28Donning_the_Overlapping_Colors_of_Myself29_Sora_Harukawa_CG2.png");
background-size: 460px auto;
background-repeat: no-repeat;
background-position: top;
}

figure .img:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 150px;
background: linear-gradient(transparent, #bcd8e8 49%);
border-radius: 0 0 8px 8px;
}

figure figcaption {
height: 70px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
position: relative;
overflow: visible;
background: #bcd8e8;
border-radius: 0 0 8px 8px;
}

figure figcaption span {
width: 100%;
}

figure figcaption span:nth-child(1) {
position: absolute;
font-family: Kosugi;
font-size: 30px;
top: -40px;
opacity: 0;
left: 10;
color: #000;
filter: drop-shadow(0px 1px white) drop-shadow(0 -1px white) drop-shadow(1px 0 white) drop-shadow(-1px 0 white);
}

figure figcaption span:nth-child(2) {
font-family: Kosugi;
font-size: 52px;
overflow: visible;
position: absolute;
top: -42px;
left: 1px;
white-space: nowrap;
color: #000;
z-index: 10px;
transform: rotate(-2deg);
filter: drop-shadow(0px 1px white) drop-shadow(0 -1px white) drop-shadow(1px 0 white) drop-shadow(-1px 0 white);
transition: top 0.3s ease-in-out;
}

figure figcaption span:nth-child(3) {
opacity: 0;
font-family: Tahoma;
padding: 0 20px;
height: 20px;
overflow: hidden;
cursor: text;
color: #fff;
}

figure button {
position: absolute;
bottom: -10px;
width: 130px;
left: calc(50% - 65px);
background: lightgrey;
color: #000;
border: 1px dashed black;
height: 35px;
border-radius: 4px;
transform: rotate(1deg);
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
cursor: pointer;
pointer-events: auto;
transition: 0.3s ease-in-out;
overflow: hidden;
z-index: 20;
}

figure button:focus {
outline: 0;
}

figure button:before {
content: "more";
position: absolute;
top: 8px;
left: 44px;
opacity: 1;
transition: 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
}

figure button:after {
content: "back";
opacity: 0;
top: 8px;
left: 0;
position: absolute;
transition: 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
}

figure:hover {
transition: 0.3s ease-in-out;
transform: rotateX(-2deg);
;
}

figure:hover button {
background: gray;
bottom: -13px;
transition: 0.3s ease-in-out;
}

figure:hover span:nth-child(2) {
top: -39px;
transition: top 0.3s ease-in-out;
}

figure.open .img {
height: 0;
}

figure.open figcaption {
height: 280px;
border-radius: 8px;
}

figure.open figcaption span:nth-child(1) {
top: -25px;
opacity: 1;
}

figure.open figcaption span:nth-child(2) {
top: -18px;
}

figure.open figcaption span:nth-child(3) {
font-family: Tahoma;
height: 100%;
opacity: 1;
padding: 80px 20px 40px 20px;
}

figure.open button:before {
opacity: 0;
left: 100%;
}

figure.open button:after {
opacity: 1;
left: 47px;
}

figure.open:hover figcaption span:nth-child(2) {
top: -15px;
transition: top 0.3s ease-in-out;
}

figure svg {
position: absolute;
bottom: 0;
width: 350px;
}
</style>
<figure class="">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="outline" mask="url(#mask)">
<feFlood flood-color="#000" result="base"></feFlood>
<feMorphology in="SourceGraphic" operator="dilate" radius="10"></feMorphology>
<feComposite in="base" operator="in"></feComposite>
<feBlend in="SourceGraphic" mode="normal"></feBlend>
<feDropShadow stdDeviation="6"></feDropShadow>
</filter>
</defs>
</svg>
<div class="img"></div>
<figcaption><span>About</span><span>Name Here!</span><span><center>Text text text text text text text text text text text<br><br>
Ib baeyhkun on Twt, go support Ximena
<br>
<center> </center></center></span></figcaption>
<button></button>
</figure>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script id="rendered-js">
$("button").click(function() {
$("figure").toggleClass("open");
});
</script>
<style>
::selection {
color: #c4e9ff;
background: #fff;
}
</style>