kanaria menu

<!--- cr cakepop crd for the menu --->


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.contmenu {
transition: all 0.5s;
position: relative;
width: 10em;
margin:auto;
-webkit-mask-image: url(https://dl.dropbox.com/s/jrlvwi8anjw814l/ezgif.com-gif-maker%20%2810%29.png);
-webkit-mask-size: 220%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}

.imagemenu {
transition: all 0.5s;
display: block;
width: 100%;
height: auto;
clip-path: circle(50% at 50% 50%);
border: 7px solid white;
border-radius: 100%
}

.contmenu:hover {
transition: all 0.5s;
-webkit-mask-image: url(https://dl.dropbox.com/s/jrlvwi8anjw814l/ezgif.com-gif-maker%20%2810%29.png);
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}

.overlay {
filter: grayscale(100%);
transition: all 0.5s;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgb(255,214,230);
background: radial-gradient(circle, rgba(255,214,230,1) 0%, rgba(255,168,202,1) 49%, rgba(255,170,204,1) 83%);
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: .3s ease;
transition: .3s ease;
-webkit-mask-image: url(https://dl.dropbox.com/s/jrlvwi8anjw814l/ezgif.com-gif-maker%20%2810%29.png);
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}

.contmenu:hover .overlay {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}

.menutext { line-height:1em;
color: white;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
font-family: sant joan;
font-size: 30px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}

.menutext a { line-height:.75em; color: white;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
font-family: sant joan;
font-size: 25px; text-decoration: none }

.menutext a:link, a:visted { line-height:.75em;
color: white;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
font-family: sant joan;
font-size: 25px;
}

@font-face {
font-family: sant joan;
src: url(https://dl.dropbox.com/s/iwvkrg8ccgd1pf4/SantJoanDespi-Regular.otf);
}
</style>
</head>
<body>

<div class="contmenu">
<img src="https://dl.dropbox.com/s/61xuz688b52lcur/ab67616d0000b273ddb2a1ee9f83322d80768019.jpg?dl=0" alt="Avatar" class="imagemenu">
<div class="overlay">
<div class="menutext">
<a href="#i">about</a> <br> <a href="#ii">rules</a> <br> <a href="#iii">media</a>
</div>
</div>
</div>

</body>
</html>