仿照京东做的一个鼠标移上去的图片文字说明效果
2014-04-30 18:12
585 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> *{ padding:0; margin:0;} .sd { width:210px; height:110px; border:solid 2px #ccc; position:relative; margin-top:50px; margin-left:100px; } .sd span { display:block; width:100%; height:100%; overflow:hidden; position:relative;} .sd span img {-webkit-transition: all .35s; top:0px; position:absolute;} p{ position:absolute; bottom:0px; height:30px; line-height:30px; font-size:12px; text-indent:10px; opacity:0; background-color:rgba(0,0,0,.4); color:#fff; width:100%; z-index:3; -webkit-transition:all 0.3s ease 0; -webkit-transform: perspective(300px) rotateX(-90deg) ; -webkit-transform-origin: 50% 100%; -webkit-transition: all .35s;} .sd:hover p { -webkit-transform: perspective(300px) rotateX(0deg);opacity:1; } .sd:hover span img { top:-30px; } </style> </head> <body> <div class="sd"> <span><img src="huiyuangou+_17.jpg" width="210" height="110" /></span> <p>文字说明</p> </div> </body> </html>
效果还是蛮不错的,推荐以后使用
相关文章推荐
- 友盟相关
- Memcached source code analysis (threading model)--reference
- C++ 的template
- [LeetCode] Generate Parentheses
- Jquery 自动保存草稿
- 一只小蜜蜂
- zepto 获取隐藏元素的高度
- [leetcode]Swap Nodes in Pairs @ Python
- 图基本算法 图搜索(广度优先、深度优先)
- 导航栏按钮
- PlayerPrefs游戏存档
- 简介使用ASP.NET访问Oracle数据库的方法
- spring shiro权限注解方式验证;
- Jna简单实例子
- 动态规划之01背包问题(Knapsacks Problem)
- jni 调用c和c++的区别.
- js实现图片上传预览
- Android的onCreateOptionsMenu()创建菜单Menu详解
- Asp的19个基本技巧
- 基于Grove的.NET应用程序开发提示