*{
padding: 0;
margin: 0;
}
#mi{
width: 234px;
height: 300px;
border: 1px solid black;
margin: 30px auto;
position: relative;
overflow: hidden;
}
#mi .bot{
width: 234px;
height: 76px;
background: #FF6700;
position: absolute;
top: 300px;
left: 0;
opacity: 0;
}
$("#mi").mouseenter(function(){
$("#mi").animate({'top':'-5px'},300);
$("#mi .bot").animate({'top':'224px','opacity':1},300);
})
$("#mi").mouseleave(function(){
$("#mi").animate({'top':0},300);
$("#mi .bot").animate({'top':'300px','opacity':0},300);
})