estrellita double border

<p> please cr @baeyhkun if you use the lace border and cr @ciarispop for the code thanks and do not remove the credit part </p>
<head>

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

.image {
opacity: 1;
width: 100%;
height: auto;
opacity: 1;
transition: .5s ease;
backface-visibility: hidden;
border: 3px double #000;
}

.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>