<style type="text/css">
ul.iris {padding:0; margin:50px auto; list-style:none; width:550px;}
ul.iris li {width:100px; height:100px; border-radius:100px; overflow:hidden; border:1px solid #fff; margin:4px; position:relative; 
background:#fdb; z-index:10;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
box-shadow: 0 0 5px 2px rgba(0,0,0,0.3),
inset 25px -43px 0 rgba(255, 0, 0, 0.3),
inset 25px 43px 0 rgba(0, 255, 0, 0.5),
inset -50px 0 0 rgba(0, 0, 255, 0.3);
float:left;
}
ul.iris li a {display:block; width:70px; height:70px; margin:15px; font:400 14px/70px 'Oswald', sans-serif; 
letter-spacing:1px; color:#fff; text-decoration:none; text-align:center; position:relative; opacity:0; z-index:10;
text-shadow:1px 1px 2px rgba(0,0,0,0.6);
-webkit-transition: z-index 0s 0.5s, opacity 0.5s;
-moz-transition: z-index 0s 0.5s, opacity 0.5s;
-o-transition: z-index 0s 0.5s, opacity 0.5s;
transition: z-index 0s 0.5s, opacity 0.5s;
}
ul.iris li b {display:block; width:100px; height:100px; background: url(trans.gif); border-radius:100px; position:absolute; 
left:0; top:0; z-index:15;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
box-shadow: 
inset 25px -43px 0 rgba(255, 0, 0, 0.2),
inset 25px 43px 0 rgba(0, 255, 0, 0.2),
inset -50px 0 0 rgba(0, 0, 255, 0.2);
-webkit-transform:rotate(60deg);
-moz-transform:rotate(60deg);
-ms-transform:rotate(60deg);
-o-transform:rotate(60deg);
transform:rotate(60deg);
}
ul.iris li:hover {zoom:1;
box-shadow: 0 0 5px 2px rgba(0,0,0,0.3), 
inset 3px -5px 0 rgba(255, 0, 0, 0.3),
inset 3px 5px 0 rgba(0, 255, 0, 0.3),
inset -5px 0 0 rgba(0, 0, 255, 0.3);
}
ul.iris li:hover b {
box-shadow: 
inset 3px -5px 0 rgba(255, 0, 0, 0.3),
inset 3px 5px 0 rgba(0, 255, 0, 0.3),
inset -5px 0 0 rgba(0, 0, 255, 0.3);
}
ul.iris li:hover a {z-index:20; opacity:1;}
</style>
<ul class ="iris" onclick="">
    <li><a href="#">HOME</a><b></b></li>
    <li><a href="#">PRODUCTS</a><b></b></li>
    <li><a href="#">SERVICES</a><b></b></li>
    <li><a href="#">CONTACT</a><b></b></li>
    <li><a href="#">SECURITY</a><b></b></li>
</ul>
<div style="height:200px;"></div>