携程transform放大效果

最新推荐文章于 2022-01-18 15:54:21 发布

weixin_30301183

最新推荐文章于 2022-01-18 15:54:21 发布

阅读量79

点赞数

原文链接：http://www.cnblogs.com/lhl66/p/7528316.html

版权

<!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>

转载于:https://www.cnblogs.com/lhl66/p/7528316.html

weixin_30301183

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
携程transform放大效果

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>携程tab</title> <style type="text/css"> .img{ ...
复制链接

扫一扫