flower mask transition menu

//*—-REMOVE THIS BEFORE USE! credit not necessary! original code is not by me, this is just mine that i adjusted myself and created the mask for. the original code was for a heart mask menu found on cakepop crd. apologises for the image and wacky measurements—-*//

<html>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mochiy+Pop+P+One&display=swap" rel="stylesheet">
<head>
<style>

.eee {
position: relative;
width: 70%;
transition: all 0.5s;
-webkit-mask-image: url(https://dl.dropboxusercontent.com/s/zyr8ntyab6ya13q/flower%20mask%20rev.png);
-webkit-mask-size: 250%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
margin:auto;
border-style:solid;
border-color: #FFDCF7;
}

.yes {
display: block;
width: 100%;
height: 100%;
transition: all 0.5s;
}

.eee:hover {
transform: scale(1) rotate(-5deg);
}

.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #FFFFFFB8;
overflow: hidden;
width: 100%;
height: 0;
transition: all 0.5s;
-webkit-mask-image: url(https://dl.dropboxusercontent.com/s/zyr8ntyab6ya13q/flower%20mask%20rev.png);
-webkit-mask-size: 70%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}

.eee:hover {
-webkit-mask-image: url(https://dl.dropboxusercontent.com/s/zyr8ntyab6ya13q/flower%20mask%20rev.png);
-webkit-mask-size: 70%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
transition: all 0.5s;

}

.eee:hover .overlay {
height: 100%;
-webkit-mask-image: url(https://dl.dropboxusercontent.com/s/zyr8ntyab6ya13q/flower%20mask%20rev.png);
-webkit-mask-size: 70%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}

.text {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: auto;
}

a.ace:link, a.ace:visited {
text-decoration:none;
text-shadow: 0 0 3px #1AD2FF;
font-family: 'Mochiy Pop P One';
color: #B434FF;
font-size: 15px;
}

a.ace:hover {
cursor:help;
}

}
</style>
</head>

<body>
<div class="eee">
<img src="https://i.postimg.cc/qMvcYzHP/0860-F216-689-C-4-CC8-89-AD-C552-B7-C07233.gif" alt="" class="yes">
<div class="overlay">
<div class="text">
<a href="#home" class="ace">home.</a>
<p><a href="#info" class="ace">one.</a></p>
<p><a href="#etc" class="ace">two.</a></p>
<p><a href="#wan" class="ace">three.</a></p>
</div>
</div>
</div>
</body>
</html>