網(wǎng)頁特效代碼模板無憂>網(wǎng)頁特效>層和布局特效代碼>

純CSS實現(xiàn)圖片列表懸停放大特效_層和布局特效

很不錯的圖片列表放大特效，鼠標懸停時圖片放大并顯示出相關(guān)文字信息，這是整合在一個圖片列表中的好效果，比起單個的更實用，多見于一些產(chǎn)品類網(wǎng)站。

<!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" mrc="text/html; charset=gb2312" />
<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="/jscss/demoimg/wall_s1.jpg" /></span></div><div class="intro"><p>服務客戶: 模板無憂</p><p>項目類別: 企業(yè)VI設(shè)計</p><p>所在行業(yè): 互聯(lián)網(wǎng)</p><p>創(chuàng)作時間: 2008.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="/jscss/demoimg/wall_s3.jpg" /></span></div><div class="intro"><p>服務客戶: 百度搜索</p><p>項目類別: 硬件防火墻</p><p>所在行業(yè): 互聯(lián)網(wǎng)</p><p>創(chuàng)作時間: 2009.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="/jscss/demoimg/wall_s4.jpg" /></span></div><div class="intro"><p>服務客戶: 新浪財經(jīng)</p><p>項目類別: 企業(yè)VI設(shè)計</p><p>所在行業(yè): 金融行業(yè)</p><p>創(chuàng)作時間: 2008.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="/jscss/demoimg/wall_s5.jpg" /></span></div><div class="intro"><p>服務客戶:騰訊新聞</p><p>項目類別: 企業(yè)VI設(shè)計</p><p>所在行業(yè): 互聯(lián)網(wǎng)</p><p>創(chuàng)作時間: 2009.05</p></div></div></div></a></li>
	</ul>
 </div>
</body>
</html>

所屬頻道：層和布局特效/更新時間：2012-11-22

[收藏][報錯][返回列表]

相關(guān)層和布局特效：

純CSS實現(xiàn)圖片列表懸停放大特效_層和布局特效

層和布局特效Rss訂閱特效代碼搜索

層和布局特效推薦

猜你也喜歡看這些