CSS实现图片列表悬停放大效果的方法
导读：本文实例讲述了纯CSS实现图片列表悬停放大效果的方法。分享给大家供大家参考。具体实现方法如下： 复制代码 代码如下: 片悬停放大 *{margin:0;padding:0;} body{margin-top:80px;font-...
本文实例讲述了纯CSS实现图片列表悬停放大效果的方法。分享给大家供大家参考。具体实现方法如下：
复制代码 代码如下:片悬停放大
*{ margin:0; padding:0; }
body{ margin-top:80px; font-size:12px; font-family:"微软雅黑",arial,sans-serif; color:#9C9C91; background:#fff; }
a { color:#333; text-decoration: none; }
a:hover { color:#f00; }
.wrap { width:720px; background:#f2f2f2; margin:0 auto; }
ul.works { list-style:none; margin:0; padding:0; }
ul.works li { float:left; display: inline; margin:0 20px 20px 0; width:158px; height:150px; }
ul.works li a { text-decoration: none; display:block; width:158px; height:150px; background:#fff; }
ul.works li a img { width:150px; height:140px; border:0; }
ul.works li a .imgthumb { position:relative; background:#EFEFEF; }
ul.works li a .imgthumb span.thumb_shadow_right { position:relative; top:-3px; left:-3px; display:block; border:1px solid #BCBEC0; background:#FFF; padding:3px; text-align:center; }
ul.works li a .intro { display:none; margin-top:5px; height:80px; color:#9C9C91; line-height:1.5; }
ul.works li a .intro p { border-bottom:1px solid #DEDEDD; overflow:hidden; }
ul.works li a:hover { position:absolute; z-index:5; margin:-60px -6px -220px -30px; width:210px; height:273px; background:#CFE798; cursor:pointer; }
ul.works li a:hover .shadow { position:relative; display:block; padding:4px; }
ul.works li a:hover .box { border:1px solid #9FCF30; background:#fff; padding:15px 10px 15px 15px; }
ul.works li a:hover .intro { display:block; }
服务客户: 好搜
项目类别: 企业VI设计
所在行业: 互联网
创作时间: 2015.03
服务客户: 百度搜索
项目类别: 硬件防火墙
所在行业: 互联网
创作时间: 2015.03
服务客户: 新浪财经
项目类别: 企业VI设计
所在行业: 金融行业
创作时间: 2015.04
服务客户:腾讯新闻
项目类别: 企业VI设计
所在行业: 互联网
创作时间: 2015.05
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： CSS实现图片列表悬停放大效果的方法
本文地址： https://pptw.com/jishu/668034.html