nisha ju mp menu

<!-- please credit me if you somehow find & use this @nishachuus -->

<style>
#contain {
display: block;
position: relative;
z-index: 99;
border-width:10px;
border-style:solid;
border-image: url("https://i.imgur.com/gTFIwdW.png") 11 fill round;
height: 75%;
width: auto;
}
.mahhh {
overflow: hidden;
}
.meow {
object-fit: fill;
position: relative;
display: block;
overflow: hidden;
z-index: 99;
height: 100%;
transition: .8s ease;
filter: saturate(115%);
width: 100%;
}
.meow:hover {
transition: .8s ease;
transform: scale(1.8) translate(60px, 35px); /* remove the translate if you just want it to zoom inwards, if u need help dm me */
filter: saturate(145%);
}
.popup {
position: absolute;
left: 0;
overflow: hidden;
right: 0;
bottom: 7%;
height: 0;
border: 1px solid #fea0a0;
z-index: 98;
margin: auto;
text-align: center;
width: 40%;
border-radius: 7px;
background: white;
transition: .7s ease;
}
#contain:hover .popup {
position: absolute;
bottom: -17%;
transition: .7s ease;
height: 4em;
}
.write {
color: #fecdcc;
text-shadow: -1px 0 #fea0a0, 0 1px #fea0a0, 1px 0 #fea0a0, 0 -1px #fea0a0, 0 0;
display: inline-block;
margin-bottom: 3px;
text-align: center;
font-family: mali;
position: relative;
top: 50%;
font-size: 1.75em;
}
.write a {
color: white;
display: inline-block;
transition: .4s ease;
text-decoration: none;
letter-spacing: normal;
}
.write a:hover {
color: #fecdcc;
transform: translate(0px, -6px);
transition: .3s ease;
}
</style>
<div id="contain"><div class="popup"><div class="write"><a href="#one">01</a> <a href="#two">02</a> <a href="#three">03</a></div></div><div class="mahhh"><img src="https://dl.dropbox.com/s/3cxmboj6yfat0va/Photo%20Nov%2017%2C%2010%2006%2058%20PM.jpg" class="meow"></div></div> /* please make sure to put your own images and such here :3 */