The CSS3 Animation:


#header .menu ul li img{
 width: 100px;
height: 100px;
margin: 0px;
 padding: 0px;
display: block;
position: relative;
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-o-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
background: #d5d5d5;
z-index: 5;
}

#header .menu ul li a{  
padding: 0px 0px 0px 0px;
font-size: 24px;
line-height: 100px;
text-align: center;
color: #fff;
background:#0080c0;
text-decoration: none;
list-style-type: none;
width: 100px;
height: 100px;
-webkit-border-radius: 3px;
border-radius: 3px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}


#header .menu ul li:hover img {
   -webkit-transform: scale(-2,7);
   -moz-transform: scale(-2,7);
   -o-transform: scale(-2,7);
   -ms-transform: scale(-2,7);
   transform: scale(-2,7);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}