携程transform放大效果
<!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放大效果的更多相关文章
- 携程App的网络性能优化实践
首先介绍一下携程App的网络服务架构.由于携程业务众多,开发资源导致无法全部使用Native来实现业务逻辑,因此有相当一部分频道基于Hybrid实现.网络通讯属于基础&业务框架层中基础设施的一 ...
- css3放大效果
参考案例: http://www.web-designers.cn/ http://www.harmay.com/ 鼠标经过图片,图片放大. 1.html: <body> <div& ...
- 我所了解的各公司使用的 Ceph 存储集群 (携程、乐视、有云、宝德云、联通等)
Ceph 作为软件定义存储的代表之一,最近几年其发展势头很猛,也出现了不少公司在测试和生产系统中使用 Ceph 的案例,尽管与此同时许多人对它的抱怨也一直存在.本文试着整理作者了解到的一些使用案例. ...
- 携程Android App插件化和动态加载实践
携程Android App的插件化和动态加载框架已上线半年,经历了初期的探索和持续的打磨优化,新框架和工程配置经受住了生产实践的考验.本文将详细介绍Android平台插件式开发和动态加载技术的原理和实 ...
- 用CSS3实现对图片的放大效果
用CSS3对图片放大效果 .right_div .topicons li a:hover img{ -webkit-transform:scale(1.5,1.5); -moz-tra ...
- 【BFS + Hash】拼图——携程2017春招编程题2
写在前面 前天参加了携程的网测--还是感觉自己太!渣!了! _(:з」∠)_ 时光匆匆啊,已经到了开始思考人生的时候了(算了不矫情了)--总之写个博客来督促一下自己.之前太懒了,很多时候都是输在 ...
- 携程Android App的插件化和动态加载框架
携程Android App的插件化和动态加载框架已上线半年,经历了初期的探索和持续的打磨优化,新框架和工程配置经受住了生产实践的考验.本文将详细介绍Android平台插件式开发和动态加载技术的原理和实 ...
- Asp.Net Core与携程阿波罗(Apollo)的第一次亲密接触
一.瞎扯点什么 1.1 阿波罗 阿波罗是希腊神话中的光明之神.文艺之神,同时也是罗马神话中的太阳神:他是光明之神,从不说谎,光明磊落,在其身上找不到黑暗,也被称作真理之神.他非常聪明,通晓世事,是 ...
- 浅谈CSS和JQuery实现鼠标悬浮图片放大效果
对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...
随机推荐
- go-import下划线的作用
原文:http://studygolang.com/articles/4356 ------------------------------------------------------------ ...
- 012 router password
Press RETURN to get started! Router>en Router#config t Enter configuration commands, one pe ...
- SDUT--找朋友（BFS&&DFS）
找朋友 Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描写叙述 X,作为户外运动的忠实爱好者,总是不想呆在家里.如今,他想把死宅Y从家 ...
- Vijos P1023Victoria的舞会3【贪心+DFS求强联通分量】
链接:Click Me! P1023Victoria的舞会3 Accepted 标签:Victoria的舞会[显示标签] 描写叙述 Victoria是一位颇有成就的艺术家,他因油画作品<我爱北京 ...
- SpringMVC 学习笔记(五) 基于RESTful的CRUD
1.1. 概述 当提交的表单带有_method字段时,通过HiddenHttpMethodFilter 将 POST 请求转换成 DELETE.PUT请求,加上@PathVariable注解从而实现 ...
- c# WinForm的一些问题
工作中,用WinForm写了一段程序,刚开始运行正常,后来替换为公司框架的时候,发现原来用Label拼的表格控件,里面的Text无法显示,后来发现,父控件的ForColor为Control导致,子空间 ...
- hdu 4990 Reading comprehension（等比数列法）
题目链接:pid=4990" style="color:rgb(255,153,0); text-decoration:none; font-family:Arial; line- ...
- vim升级到8.0
1.卸载 sudo apt-get remove --purge vim 2.添加8.0的vim源并安装 sudo add-apt-repository ppa:jonathonf/vim sudo ...
- 牛了个逼，phpstorm查询技巧
两次shift,会弹出最近常用的文件. 可以查询按照方法名,类名,文件名等进行查询. Ctrl+E可以查看最近使用的文件. Ctrl+Shift+E可以查看最近修改的文件. Ctrl+shift+N ...
- java用户角色权限设计
实现业务系统中的用户权限管理 B/S系统中的权限比C/S中的更显的重要,C/S系统因为具有特殊的客户端,所以访问用户的权限检测可以通过客户端实现或通过客户端+服务器检测实现,而B/S中,浏览器是每一台 ...