css卡片动画效果

<div class="layout-container container-fluid index-select">
        <div class="index-heading">
            <h2>选择三道</h2>
            <p>专业实力与丰富经验</p>
        </div>
        <div class="select-content row">
            <div class="select-card">
                <div class="content-box">
                    <div class="card">
                        <div class="img"><img src="__HOME__images/select1.png" alt=""></div>
                        <h3 class="title">丰厚的教学底蕴</h3>
                    </div>
                    <div class="item">
                        <div class="desc">
                            <h3 class="title">丰厚的教学底蕴</h3>
                            <p>艺兴三道教育是国内艺术教育培训机构，以优秀的师资团队及独特的教学方法，在艺术领域有着卓越的成绩。</p>
                        </div>
                    </div>
                </div>
                <div class="content-box">
                    <div class="card">
                        <div class="img"><img src="__HOME__images/select2.png" alt=""></div>
                        <h3 class="title">校区遍布全国</h3>
                    </div>
                    <div class="item">
                        <div class="desc">
                            <h3 class="title">校区遍布全国</h3>
                            <p>全国拥有多个教学中心：成都 巴中 沙坪坝 渝中 渝北 贵州遵义 云南大理。</p>
                        </div>
                    </div>
                </div>
                <div class="content-box">
                    <div class="card">
                        <div class="img"><img src="__HOME__images/select3.png" alt=""></div>
                        <h3 class="title">艺术人才孵化地</h3>
                    </div>
                    <div class="item">
                        <div class="desc">
                            <h3 class="title">艺术人才孵化地</h3>
                            <p>学生去向：中央美术学院、中国美术学院、清华美院、四川美术学院、人民大学、中国传媒大学、同济大学、江南大学、重庆大学等高校。</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="select-movies">
                <video poster="/static/home/movies/movies.jpg" controls="controls">
                    <source src="/static/home/movies/movies.mp4">
                    您的浏览器不支持 video 标签。
                </video>
            </div>
        </div>
    </div>

.index-select {
  .select-title {
    height: 115px;
    margin-bottom: 40px;
    text-align: center;

    .title {
      font-size: 46px;
      color: #000;
    }

    .text-bottom {
      font-size: 24px;
      color: #c2c2c2;
    }
  }
  .select-content {    
    overflow: hidden;
    color: #fff;
    .select-card{
      width: 355px;
      height: 463px;
      float: left;
    }  
  }
  .content-box{
    position: relative;
    top: 0;
    transition: top 1s;
    -moz-transition: top 1s;	/* Firefox 4 */
    -webkit-transition: top 1s;	/* Safari 和 Chrome */
    -o-transition: top 1s;	/* Opera */
    &:hover{
      .item{
        opacity: 1;
      }
    }
    &:nth-child(1){
      z-index: 1;
      .img{
        padding-top: 15px !important;
      }
      .item{
        background:url('/static/home/images/select1-hover.png') #ff5231 no-repeat center 65px;
      }  
      &:hover{
        .item{
          z-index: 1;
        }
      }
      &:hover+.content-box,&:hover+.content-box+.content-box{
        top: 320px;
      }  
    }
    &:nth-child(2){
      z-index: 2;
      margin-top: -20px;
      .item{
        background:url('/static/home/images/select2-hover.png') #ff5231 no-repeat center 65px;
      }
      &:hover{
        .item{
          z-index: 2;
          top: -147px;
        }
      }
      &:hover+.content-box{
        top: 170px;
      }     
    }
    &:nth-child(3){
      z-index: 3;
      margin-top: -20px;
      .item{
        background:url('/static/home/images/select3-hover.png') #ff5231 no-repeat center 65px;
      }
      &:hover .item{
        z-index: 3;;
        top: -296px;
      }
    }
  }  
  .card{
    width: 100%;
    height: 167px;
    padding: 20px;
    border: 2px solid #ff5231;
    border-radius: 10px;
    cursor: pointer;
    color: #ff5231;
    background-color: #fff;
    .img{
      float: left;
      width: 160px;
      height: 100%;
      padding: 20px;
      text-align: center;
    }
    .title{
      font-size: 28px;
      line-height: 36px;
      font-weight: 700;
      letter-spacing: 4px;
    }
    img{
      height: 100%;
      width: auto;
    }
  }
  .item {  
    position:absolute;
    opacity: 0;
    top:0;
    left: 0;
    z-index: 0;
    width: 354px;
    height: 466px;
    text-align: center;
    border: 1px solid #ff5231;
    border-radius: 10px;
    transition:top 0.8s 0.2s,opacity .2s;
    -moz-transition: top 0.8s 0.2s,opacity .2s;	/* Firefox 4 */
    -webkit-transition: top 0.8s 0.2s,opacity .2s;	/* Safari 和 Chrome */
    -o-transition: top 0.8s 0.2s,opacity .2s;	/* Opera */
    .desc{
      position: relative;
      top: 244px;
    }
    p {
      width: 220px;
      margin: auto;
      font-size: 16px;
      text-align: justify;
    }
  }
  .select-movies{
    position: relative;
    float: right;
    width: 820px;
    height: 463px;
    // background-color: #ff5231;
    border: 2px solid #ff5231;
    border-radius: 20px;
    overflow: hidden;
    video{
    width: 100%;
    }
  }
}