<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.