鼠标划过title时展示下边的详情

HTML代码：

  <div class="box">
    <p class="text1" style="line-height: 20px;">cross-fade中的透明度值是只作用于后面一张图片上！</p>
    <div class="text2"></div>
  </div> 
  <div class="box">
    <p class="text1">cross-fade中的透明度值是只作用于后面一张图片上！</p>
    <div class="text2"></div>
  </div> 

 

CSS代码：

    *{
      margin: 0;
      padding: 0;
    }
    .box{
      width: 400px;
      height: 20px;
      overflow: hidden;
      transition: all 1s linear;
    }

    .box:hover{
      height: 420px;
    }
    .box:hover .text2{
      display: block;
    }

    .text2{
      width: 400px;
      height: 400px;
      background: #ccc;
      display: none;
    }

 

 

效果展示：