estrellita.crd.co menu

<head>

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

.image {
opacity: 1;
width: 100%;
height: auto;
opacity: 1;
transition: .5s ease;
backface-visibility: hidden;
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;
}

.overlay {

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

}

.container:hover .overlay {
width: 35%;
opacity: 0.8;

}
.container:hover .image {
opacity: 0.3;
}

.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;
font-style: italic;
position: absolute;
div align:"left";
top: 50%;
color: #fff;
left: 40%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
white-space: nowrap;

</style>
</head>
<body>


<div class="container">

<!-- change the image below only--!>


<a href="https://twitter.com/un_nm5sy/status/1342849832336027648/photo/1" target= "_blank"><img src="https://pbs.twimg.com/media/EqLCzecUcAEtsSv?format=jpg&name=large" alt=" " class="image"></a>
<div class="overlay">
<div class="middle">
<div class="link"><a href="#home">index</a>
<p></p>
<a href="#i">about</a>
<p></p>
<a href="#ii">rules</a>
<p></p>
<a href="#iii">love</a>
</div>
</div>
</div>

</body>
</html>