1. 程式人生 > >攜程transform放大效果

攜程transform放大效果

1.2 ive pri mage sca html src div class

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>攜程tab</title>
        <style type="text/css">
            .img{
                height: 110px;
                width: 220px;
                position: relative;
                overflow
: hidden; } .img img{ width: 220px; } .message{ background: url(http://pic.c-ctrip.com/platform/online/home/un_sprite_tag.png); position: absolute; top: 0; left: 20px; height
: 41px; width: 41px; text-align: center; color: white; font-size: 14px; padding-top: 5px; /*overflow: hidden;*/ box-sizing: border-box; } .sell{ position
: absolute; bottom: 0; background: rgba(0,0,0,0.5); color: white; width:100%; font-size: 14px; height: 30px; line-height: 30px; } .area{ width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; } .img:hover img{ transform: scale(1.2); } </style> </head> <body> <div class="img"> <img src="https://dimg03.c-ctrip.com/images/100s0800000033z714C56_C_500_280.jpg" /> <span class="message">特賣</span> <div class="sell">超正航班,超級特賣</div> </div> <div class="area" title="巴厘島5-6日4晚自由行(5鉆)·庫塔海灘零距離 五星萬豪/喜來登 人氣酒店">巴厘島5-6日4晚自由行(5鉆)·庫塔海灘零距離 五星萬豪/喜來登 人氣酒店 </div> </body> </html>

攜程transform放大效果