鼠标放上去效果

html代码：

 <!-- 鼠标效果 -->
        <ul class="youshi-ul mauto">
            <li class="li1">
                <div class="t1">
                   <p class="p1">抵押易</p>
                   <p class="p2">LOAN EASY</p>
                </div>
                <div class="zz t2">
                    有车就能贷款<br>
                    15316161085
                </div>
            </li>
            <li class="li2">
                <div class="t1">
                   <p class="p1">放款快</p>
                   <p class="p2">LOAN FAST</p>
                </div>
                <div class="zz t2a">
                    30分钟放款<br>
                    解您燃眉之急
                </div>
            </li>
            <li class="li3">
                <div class="t1">
                   <p class="p1">额度高</p>
                   <p class="p2">HIGH QUOTA</p>
                </div>
                <div class="zz t2b">
                    最高估值100%<br>
                    10万车，贷10万
                </div>
            </li>
            <li class="li4">
                <div class="t1">
                   <p class="p1">费率低</p>
                   <p class="p2">LOW RATES</p>
                </div>
                <div class="zz t2c">
                    最低1.8分<br>
                   低到不敢想
                </div>
            </li>
        </ul>
        <!-- 鼠标效果 end -->

css样式：

/*鼠标效果*/
.youshi-ul{
    width: 1100px;
}
.youshi-ul li{
    overflow: hidden;
    width: 270px;
    height: 270px;
    float:left;
    text-align: center;
    border: 1px solid #f0f0f0;
    position: relative;
    border-radius: 135px;

}
.youshi-ul .li1  .t1{
    background: url(../images/y1.png) no-repeat scroll center 86px;
}
.youshi-ul .li2  .t1{
    background: url(../images/y2.png) no-repeat scroll center 86px;
}
.youshi-ul .li3  .t1{
    background: url(../images/y3.png) no-repeat scroll center 86px;
}
.youshi-ul .li4  .t1{
    background: url(../images/y4.png) no-repeat scroll center 86px;
}

.youshi-ul li .t1{
    width: 100%;
    height: 140px;
    padding: 180px 0px 0px;
    font-size: 14px;
    color: #9B9797;
    font-family: Helvetica;
    text-transform: uppercase;
    position: absolute;
    left: 0px;
    top: 0px;
    transition: all 400ms ease 0s;
}
.youshi-ul li .t1 .p1 {
    margin: 0px 0px 5px;
    font-size: 18px;
    color: #3A3A3A;
    font-family: "微软雅黑";
 }
 .youshi-ul li .t1 .p2{
     padding-top: 5px;
     font-family: "宋体";
     font-size: 14px;
     color:#848484;
 }

.youshi-ul li:hover{
    border-color: #dfdfdf;
    background: #fff;
    border-radius: 135px;
}
.youshi-ul li:hover  .t1 {
    top: -60px;
}
.youshi-ul li:hover .t2{
    bottom: 0px;
}
.youshi-ul li:hover .t2a{
    bottom: 0px;
}
.youshi-ul li:hover .t2b{
    bottom: 0px;
}
.youshi-ul li:hover .t2c{
    bottom: 0px;
}
.youshi-ul li .zz{
     width: 100%;
    padding: 15px 0px 0px;
    height: 73px;
    line-height: 24px;
    font-size: 14px;
    font-family: "宋体";
    color: #FFF;
    position: absolute;
    left: 0px;
    bottom: -98px;
    transition: all 400ms ease 0s;
}

.youshi-ul li .t2 {
    background: #1468C7 none repeat scroll 0% 0%;
}
.youshi-ul li .t2a{
    background: #393 none repeat scroll 0% 0%;
}
.youshi-ul li .t2b {
    background: #F60 none repeat scroll 0% 0%;
}

.youshi-ul li .t2c {
    background: #D9534F none repeat scroll 0% 0%;
    }