<!--師資介紹-->
<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;
}

CSS3 過渡 文字向上滾動