<div class="cat">
	<div class="cat-main">
			<div class="info"></div>
			<a href="#" class="portfolio-link"><div class="petal portfolio"></div></a>
			<a href="#" class="contact-link"><div class="petal contact"></div></a>
			<a href="#" class="socialmedia-link"><div class="petal socialmedia"></div></a>
			<a href="#" class="inspiration-link"><div class="petal inspiration"></div></a>
			<a href="#" class="mystery-link"><div class="petal mystery"></div></a>
	</div>

</div>
body {
  background: #666;
}
a {
	color: #fff;
	display: block;
}

.cat {
	width: 200px;
	height: 200px;
	margin: 100px auto 0 auto;
}

.cat-main {
	width: 200px;
	height: 200px;
}

.info {
	width: 200px;
	height: 200px;
	background: #def68a url('http://leejan.com/menu/info.png') 47% 50% no-repeat;
	border-radius: 100%;
	z-index: 20;
	position: absolute;
	-webkit-box-shadow: inset 0px 0px 30px 10px rgba(204, 228, 89, 1);
	box-shadow: inset 0px 0px 30px 10px rgba(204, 228, 89, 1);
}

.petal {
	width: 150px;
	height: 150px;
	border-radius: 100%;
	margin-top: 100px;
	margin-left: 100px;
	z-index: 5;
	position: absolute;
	-webkit-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	transform-origin: 0 0;
	opacity: 0;
  -webkit-backface-visibility:hidden;
   -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
     -o-backface-visibility:hidden;
        backface-visibility:hidden;
  -webkit-transform:translate3d(0,0,0);
   -moz-transform:translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
     -o-transform:translate3d(0,0,0);
        transform:translate3d(0,0,0);
}

.cat-main .portfolio {
	-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);
	background: #e6ff8d url('http://leejan.com/menu/portfolio.png') 65% 65% no-repeat;
}

.cat-main:hover .portfolio {
	-webkit-transform:rotate(-72deg);-ms-transform:rotate(-72deg);transform:rotate(-72deg);
	opacity: 100;
	transition: opacity .5s ease-out, -ms-transform .5s ease-out, transform .5s ease-out;
	-webkit-transition: opacity .5s ease-out, -webkit-transform .5s ease-out;
}

.contact {
	-webkit-transform:rotate(-72deg);-ms-transform:rotate(-72deg);transform:rotate(-72deg);
	background: #e6ff8d url('http://leejan.com/menu/mail.png') 65% 65% no-repeat;
}

.cat-main:hover .contact {
	-webkit-transform:rotate(-144deg);-ms-transform:rotate(-144deg);transform:rotate(-144deg);
	opacity: 100;
	transition: opacity .5s ease-out .3s, -ms-transform .5s ease-out .3s, transform .5s ease-out .3s;
	-webkit-transition: opacity .5s ease-out .3s, -webkit-transform .5s ease-out .3s;
}

.socialmedia {
	-webkit-transform:rotate(-144deg);-ms-transform:rotate(-144deg);transform:rotate(-144deg);
	background: #e6ff8d url('http://leejan.com/menu/socialmedia.png') 65% 65% no-repeat;
}

.cat-main:hover .socialmedia {
	-webkit-transform:rotate(-216deg);-ms-transform:rotate(-216deg);transform:rotate(-216deg);
	opacity: 100;
	transition: opacity .5s ease-out .6s, -ms-transform .5s ease-out .6s, transform .5s ease-out .6s;
	-webkit-transition: opacity .5s ease-out .6s, -webkit-transform .5s ease-out .6s;
}

.inspiration {
	-webkit-transform:rotate(-216deg);-ms-transform:rotate(-216deg);transform:rotate(-216deg);
	background: #e6ff8d url('http://leejan.com/menu/inspiration.png') 65% 65% no-repeat;
}

.cat-main:hover .inspiration {
	-webkit-transform:rotate(-288deg);-ms-transform:rotate(-288deg);transform:rotate(-288deg);
	opacity: 100;
	transition: opacity .5s ease-out .9s, -ms-transform .5s ease-out .9s, transform .5s ease-out .9s;
	-webkit-transition: opacity .5s ease-out .9s, -webkit-transform .5s ease-out .9s;
}


.mystery {
	-webkit-transform:rotate(-288deg);-ms-transform:rotate(-288deg);transform:rotate(-288deg);
	background: #e6ff8d url('http://leejan.com/menu/mystery.png') 65% 65% no-repeat;
}

.cat-main:hover .mystery {
	-webkit-transform:rotate(-360deg);-ms-transform:rotate(-360deg);transform:rotate(-360deg);
	opacity: 100;
	transition: opacity .5s ease-out 1.2s, -ms-transform .5s ease-out 1.2s, transform .5s ease-out 1.2s;
	-webkit-transition: opacity .5s ease-out 1.2s, -webkit-transform .5s ease-out 1.2s;
}

.cat-main .portfolio, .cat-main .contact, .cat-main .socialmedia, .cat-main .inspiration, .cat-main .mystery {
	transition-property: opacity, -webkit-transform, -ms-transform, transform;
	transition-duration: .2s, .2s, .2s, .2s;
	transition-delay: 0s, 0s, 0s, 0s;
	-webkit-transition-property: -webkit-transform;
	-webkit-transition-duration: .2s, .2s, .2s, .2s;
	-webkit-transition-delay: 0s, 0s, 0s, 0s;
}

.portfolio, .contact, .socialmedia, .inspiration, .mystery {
	-webkit-box-shadow: inset 0px 0px 30px 10px rgba(204, 228, 89, 1);
	box-shadow: inset 0px 0px 30px 10px rgba(204, 228, 89, 1);
}

.portfolio:hover, .contact:hover, .socialmedia:hover, .inspiration:hover, .mystery:hover {
	-webkit-box-shadow: inset 0px 0px 30px 20px rgba(204, 228, 89, 1);
	box-shadow: inset 0px 0px 30px 20px rgba(204, 228, 89, 1);
	z-index: 19;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.