CSS3 过渡 文字向上滚动

<!--师资介绍-->
<div class="teac_intr">
    <div class="container">
        <h1 class="f50 bold_txt text-center">师资介绍</h1>
        <ul class="clearfix">
            <li>
                <img src=".././asse/images/teac_cl.png" alt="陈蕾"/>
                <div class="transi_effe">
                    <div class="transi_effe_sho">
                        <h3>陈蕾 / LEI CHEN</h3>
                        <p>国家心理咨询师教材编委、评审委员会委员<br/>资深培训专家 <br/>
                            劳动部职业技能鉴定专家<br/>
                            国家级心理咨询讲师
                        </p>
                    </div>

                    <div class="transi_effe_non">
                        <h3>陈蕾 / LEI CHEN</h3>
                        <p>授课内容 <br/>
                            《基础知识串讲》<br/>
                            《二、三级技能串讲》<br/>
                            《二、三模考讲评与答题技巧》
                        </p>
                    </div>
                </div>
            </li>
            <li>
                <img src=".././asse/images/teac_gy.png" alt="郭勇"/>
            </li>
            <li class="li_imp">
                <img src="../asse/images/teac_hsq.png" alt="韩三奇"/>
            </li>
        </ul>
        <ul class="clearfix mt36">
            <li>
                <img src="../asse/images/teac_byp.png" alt="白玉萍"/>
            </li>
            <li>
                <img src="../asse/images/teac_hhb.png" alt="胡海波"/>
            </li>
            <li class="li_imp">
                <img src="../asse/images/teac_jcq.png" alt="姜长青"/>
            </li>
        </ul>
    </div>
</div>

CSS

/*师资介绍*/
.mt36{
    margin-top: 36px;
}
.teac_intr{
    width: 100%;
    height: 1240px;
    background: url(../images/teac_intr_bg.png) no-repeat center;
}
.teac_intr>.container>h1{
    color: #fff;
    margin: 50px auto 30px;
}
.teac_intr>.container>ul{
    width: 1200px;
}
.teac_intr>.container>ul>li{
    float: left;
    width:375px;
    height:472px;
    background: #fff;
    margin-right: 35px;
}
.teac_intr>.container>ul>li>img{
    display: block;
    margin:20px auto;
}
.li_imp{
    margin-right: 0 !important;
}
.teac_intr li>.transi_effe{
    position: relative;
    width:372px;
    height:182px;
    overflow: hidden;
    text-align: center;
    line-height: 30px;
}
.teac_intr li>.transi_effe h3{
    width:156px;
    height:36px;
    line-height:36px;
    font-size: 16px;
    font-weight: bold;
    margin: 0 auto 20px;
    border-bottom:1px solid #dd1e2e;
}
.teac_intr li>.transi_effe>.transi_effe_sho{
    position: absolute;
    left: 50px;
    top: 0px;
    transition: 3s linear;
}
.teac_intr li>.transi_effe>.transi_effe_non{
    position: absolute;
    left: 78px;
    top: 176px;
    transition: 3s linear;
}
.teac_intr li:hover{
    border: 1px solid #dd1e2e;
}
.teac_intr li>.transi_effe:hover .transi_effe_sho{
    top: -180px;
}
.teac_intr li>.transi_effe:hover .transi_effe_non{
    top: 0px;
}