claris.crd.co menu made by me


<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%;
}


.image { /* edit border + width/height of image here */
display: block;
border: 3px double #000;
width: 100%;
height: auto;
}

.overlay { /*the menu part */
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 { /*code of menu */
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>
</body>