Hover within the box
<div id="container">
  <div class="red">1</div>
  <div class="yellow">2</div>
  <div class="green">3</div>
</div>
#container{
  height:100px;
  border:1px solid black;
}
#container div{
  display:inline-block;
  width:30%;
  text-align:center;
  font-size:24px;
  line-height:100px;
  transition-duration:1s;
}
#container:hover div{
  height:100px;
}
.red{
  background-color:red;
  height:0px;
}
.yellow{
  background-color:yellow;
  height:0px;
  transition-delay:1s;
}
.green{
  background-color:green;
  height:0px;
  transition-delay:2s;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.