SOURCE

<div class="wrap">
	<div class="number">number1</div>
</div>

* {
  margin: 0;
  padding: 0;
}
.wrap {
  background: #ccc;
  text-align: center;
  padding: 20px 0;
  .number {
    background: #fff;
    width: 100px;
    padding: 10px 20px;
    margin: 0 auto;
    position: relative;
    &:before {
      content: 'number1';
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      padding: 10px 0;
      background: #eee;
      transform-origin: 50% 0;
    
      transition: all 0.5s;
    }
    &:hover:before {
        transform: rotateX(-90deg);
       background: #fff;
    }
  }
}