攜程transform放大效果
阿新 • • 發佈:2017-09-15
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放大效果