2w3 ju mp menu

<!--- credit @catkanade --->

<style>
#contain {
display: block;
width: 100%;
height: 100%;
z-index: 200;
}
.img {
transition: .5s ease;
margin: auto;
position: absolute;
z-index: 100;
top: 0;
right: 0;
left: 0;
bottom: 0;
border-radius: 50%;
border: 3px double #FF809E;
width: 250px;
height: 250px;
overflow: hidden;
}
#contain:hover .spinny {
animation-delay: 1.5s;
animation: spin 8.5s linear infinite;
animation-play-state: running;
}
.spinny {
width: 100%;
height: 100%;
}
@keyframes spin {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.zee {
position: relative;
z-index: 50;
}
#contain:hover .zee {
position: relative;
z-index: 101;
transition: 1s;
}
.textscaling {
filter: blur(6px);
transition: .75s;
transform: scale(0.8) rotate(90deg) translate(0px, 0px);
}
#contain:hover .textscaling {
transform: scale(1) rotate(0deg) translate(-1px, -1px);
filter: blur(0px);
transition: 0s;
}
.text {
text-align: center;
top: 0;
right: 0;
left: 0;
margin: auto;
bottom: 0;
position: absolute;
font-family: gaegu;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: -20px;
z-index: 50;
width: 250px;
height: 250px;
overflow-y: scroll;
background: white;
font-size: 1em;
border-radius: 50%;
border: 3px double #FF809E;
}
#contain:hover .img {
transform: translate(-65px, -65px) rotate(180deg);
transition: 1.1s ease;
}
#contain:hover .text {
animation: textmarry 1.1s ease;
animation-fill-mode: forwards;
animation-iteration-count: 1;
}
@keyframes textmarry {
0% {
transform: translate(0px, 0px);
}
70% {
transform: translate(115px, 115px);
}
72% {
z-index: 105;
}
100% {
transform: translate(65px, 65px);
z-index: 105;
}
}
i {
font-style: italic;
}
a {
transition: .5s;
letter-spacing: normal;
}
a:hover {
transition: .5s;
letter-spacing: 2px;
}
::-webkit-scrollbar {
width: 0;
background: transparent;
}
::-webkit-scrollbar-thumb {
background: transparent;
}
</style>

<div id="contain"><div class="img"><img src="IMAGE LINK HERE" class="spinny"></div><div class="zee"><div class="textscaling"><div class="text"><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum sem dolor, sollicitudin malesuada tortor ultrices nec. Sed nec nibh tellus. Morbi vel venenatis augue. Maecenas ultrices orci sit amet nunc aliquam mollis. Donec cursus ipsum a lacinia sagittis. Quisque congue dictum cursus. Cras id nisi urna.</br></div></div></div></div>