怎么用CSS实现图片列表悬停放大效果

这篇文章主要讲解了“怎么用CSS实现图片列表悬停放大效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用CSS实现图片列表悬停放大效果”吧！

创新互联建站致力于成都网站设计、成都网站制作、外贸网站建设,成都网站设计,集团网站建设等服务标准化，推过标准化降低中小企业的建站的成本，并持续提升建站的定制化服务水平进行质量交付，让企业网站从市场竞争中脱颖而出。选择创新互联建站，就选择了安全、稳定、美观的网站建设服务！

代码如下:

<!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>
*{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;}
</style>
</head>
<body>
<div class="wrap">
<ul class="works">
<li><a href="#"><div class="shadow"><div class="box"><div class="imgthumb"><span class="thumb_shadow_right"><img src="wall_s1.jpg" /></span></div><div class="intro"><p>服务客户: 好搜</p><p>项目类别: 企业VI设计</p><p>所在行业: 互联网</p><p>创作时间: 2015.03</p></div></div></div></a></li>
<li><a href="#"><div class="shadow"><div class="box"><div class="imgthumb"><span class="thumb_shadow_right"><img src="wall_s3.jpg" /></span></div><div class="intro"><p>服务客户: 百度搜索</p><p>项目类别: 硬件防火墙</p><p>所在行业: 互联网</p><p>创作时间: 2015.03</p></div></div></div></a></li>
<li><a href="#"><div class="shadow"><div class="box"><div class="imgthumb"><span class="thumb_shadow_right"><img src="wall_s4.jpg" /></span></div><div class="intro"><p>服务客户: 新浪财经</p><p>项目类别: 企业VI设计</p><p>所在行业: 金融行业</p><p>创作时间: 2015.04</p></div></div></div></a></li>
<li><a href="#"><div class="shadow"><div class="box"><div class="imgthumb"><span class="thumb_shadow_right"><img src="wall_s5.jpg" /></span></div><div class="intro"><p>服务客户:腾讯新闻</p><p>项目类别: 企业VI设计</p><p>所在行业: 互联网</p><p>创作时间: 2015.05</p></div></div></div></a></li>
</ul>
</div>
</body>
</html>

感谢各位的阅读，以上就是“怎么用CSS实现图片列表悬停放大效果”的内容了，经过本文的学习后，相信大家对怎么用CSS实现图片列表悬停放大效果这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！

文章题目：怎么用CSS实现图片列表悬停放大效果
文章转载：https://www.cdcxhl.com/article14/jcehge.html

成都网站建设公司_创新互联，为您提供网站收录、外贸网站建设、域名注册、建站公司、软件开发、品牌网站制作

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容