<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;
}