CSS
.jupeanima{
position:relative;
margin:15px 0 0 10px;
overflow:hidden;
margin:0;
float:left;
padding:0;
background:#1d1d1d url(https://lh6.googleusercontent.com/-Rf9nVjhGRBo/T2XE4tDyeSI/AAAAAAAAAcI/80Id8S5lkdE/h120/bgTitik2AnimaV21H21.gif);
}
ul#superAnima{
width:599px;
margin:10px 0 20px;
padding:0;
margin:3px 4px 3px 4px;
clear:both;
float:left;
}
ul#superAnima li{
margin:0;
padding:0;
overflow:hidden;
float:left;
height:40px;
}
ul#superAnima li a.anima{
padding:10px 10px;
font:10px Arial;
float:left;
color:white;
text-decoration:none;
text-transform:uppercase;
text-shadow:1px 1px 1px #000;
clear:both;
height:18px;
line-height:20px;
background:white url(https://lh4.googleusercontent.com/-a0zdLvnsQE8/T2XFNjkIrWI/AAAAAAAAAcQ/rrmwCSZMx3k/h120/gradBlueH2V53.gif) top left repeat-x;
text-align:center;
transition:all 1.2s ease-in-out;
-o-transition:all 1.2s ease-in-out;
-moz-transition:all 1.2s ease-in-out;
-webkit-transition:all 1.2s ease-in-out;
-ms-transition:all 1.2s ease-in-out;
font-weight:bold;
border:1px solid #999;
}
ul#superAnima li a.anima:hover{
transform:scale(1.0) rotate(0deg) translate(0, -40px);
-o-transform:scale(1.0) rotate(0deg) translate(0, -40px);
-moz-transform:scale(1.0) rotate(0deg) translate(0, -40px);
-webkit-transform:scale(1.0) rotate(0deg) translate(0, -40px);
-ms-transform:scale(1.0) rotate(0deg) translate(0, -40px);
}
ul#superAnima li a.anima span{
padding:10px 9px;
color:transparent;
opacity:0.2;
filter:alpha(opacity=20);
border:2px solid transparent;
transition:all 1.6s ease-out;
-o-transition:all 1.6s ease-out;
-moz-transition:all 1.6s ease-out;
-webkit-transition:all 1.6s ease-out;
-ms-transition:all 1.6s ease-out;
transform:scale(8.0) rotate(0deg) translate(0,-10px);
-o-transform:scale(8.0) rotate(0deg) translate(0,-10px);
-moz-transform:scale(8.0) rotate(0deg) translate(0,-10px);
-webkit-transform:scale(8.0) rotate(0deg) translate(0,-10px);
-ms-transform:scale(8.0) rotate(0deg) translate(0,-10px);
}
ul#superAnima li a.anima span:hover{
opacity:1.0;
filter:alpha(opacity=100);
padding:4px 9px;
height:18px;
transform:scale(1.0) rotate(0deg) translate(0,0);
-o-transform:scale(1.0) rotate(0deg) translate(0,0);
-moz-transform:scale(1.0) rotate(0deg) translate(0,0);
-webkit-transform:scale(1.0) rotate(0deg) translate(0,0);
-ms-transform:scale(1.0) rotate(0deg) translate(0,0);
color:#FF0;
border:2px solid #000;
background:#555;
text-shadow:1px 1px 1px #000;
box-shadow:1px 2px 15px #fff, 0px -1px 3px red, -2px -2px 2px orange, -3px 3px 3px yellow;
border-radius:4px;
}
ul#superAnima li{
border:1px solid transparent;
background:#CC9933 url(https://lh4.googleusercontent.com/-Tk55wbQOL_s/T2XGvQfF2WI/AAAAAAAAAcY/1_THN4F2g7A/h120/gradOrangeBlackV45H2.gif);
}
ul#superAnima li:hover{
background:#000 url(https://lh6.googleusercontent.com/-Rf9nVjhGRBo/T2XE4tDyeSI/AAAAAAAAAcI/80Id8S5lkdE/h120/bgTitik2AnimaV21H21.gif);
border:1px solid #777;
}
HTML
<div class="jupeanima">
<ul id="superAnima">
<li><a class="anima" href="http://jamil182.blogspot.com">Home<br /><br /><span>Home</span></a></li>
<li><a class="anima" href="http://google.com">Google<br /><br /><span>Google</span></a></li>
<li><a class="anima" href="http://facebook.com">Facebook<br /><br /><span>Facebook</span></a></li>
<li><a class="anima" href="http://jamil182.blogspot.com">Tutorial Blogger<br /><br /><span>Tutorial Blogger</span></a></li>
<li><a class="anima" href="http://jamil182.blogspot.com">Image Gallery<br /><br /><span>Image Gallery</span></a></li>
</ul>
</div>