<div class="block">
   <div class="header">1111</div>
   <div class="footer">2222</div>
 </div>
.block{
  position:relative;
   
  border:1px solid;
  width:100px;
}
.header{
  position:relative;
  height:150px;
  border:1px solid;
  width:100px;
}
.block:hover .footer{
 max-height:999px;  transition: .3s all;
}

.footer{
  transition: .3s all;
  max-height:0px;
  overflow:hidden;
  border:1px solid;
  position:absolute;
 
   
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.