menu overlay

<head>

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

.image {
opacity: 1;
width: 100%;
height: 10%;
opacity: 1;
transition: .5s ease;
backface-visibility: hidden;
border-width:7px;
border-style:solid;
border-image:url("https://media.discordapp.net/attachments/840568798465884200/846154914303967262/image_2021-05-24_013511.png") 8 fill round;
}

.overlay {

position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #fff;;
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
opacity: 0.7;

}

.container:hover .overlay {
width: 30%;
color: #FED9E3;

}
.container:hover .image {
color: #fff;
opacity: 0.5;
}

.link {
text-decoration:none;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
font-size:20px;
font-weight:bold;
position: absolute;
top: 50%;
color: #ffffff;
left: 45%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
white-space: nowrap;

</style>
</head>
<body>

<div class="container">
<img src="https://i.pinimg.com/564x/42/8d/d5/428dd557be8f0645bb804ce7ee9b99be.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="middle">
<div class="link"><a href="#home">index</a><br>
<a href="#one">about</a><br>
<a href="#two">rules</a><br>
<a href="#three">loves</a><br>
</div>
</div>

</body>
</html>