claris crd menu w lace border

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

<style>
.container {
position: relative;
width: 100%;
}

.no {

position:fixed;
bottom:0;
margin-bottom:1px;
left:0;
margin-left:1px;
z-index:99;

}

.image {
display: block;
border-width:7px;
border-style:solid;
border-image: url("https://media.discordapp.net/attachments/826854899013648384/839700444375810078/tumblr_inline_o98n9dbCl61u2r0ws_540_1_2.png") 8 fill round;
width: 100%;
height: auto;
}

.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
overflow: hidden;
width: 100%;
height:0;
transition: .5s ease;
}

.container:hover .overlay {
bottom: 84%;
height: 16%;
}
div.scrollmenu {
background-color: #fff;
overflow: auto;
white-space: nowrap;
opacity:0.7;
}

div.scrollmenu a {
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
font-size:95%;
font-family: 'Fredoka One', cursive;
font-weight: normal;
display: inline-block;
color: white;
text-align: left;
padding: 11px;
text-decoration: none;
}

div.scrollmenu a:hover {
background-color: #000;
opacity:0.3;

}
}

.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>

<div class="container">
<img src="https://i2.wp.com/dianaurban.com/wp-content/uploads/2017/07/01-cat-stretching-feet.gif?resize=500%2C399&ssl=1" alt="Avatar" class="image">
<div class="overlay">
<div class="scrollmenu">
<a href="#home">link one</a>
<a href="#i">link two</a>
<a href="#ii">link three</a>
<a href="#iii">link four</a>

</div>

</div>

</div>
<a href="twitter.com/ciarispop"><img class=no src="https://cur.cursors-4u.net/cursor.png"></a>
</body>