CSS使用overflow實現鼠標經過放大縮略圖_圖片特效特效

鼠標滑過圖片顯示縮略圖，看上去這個特效很惹人喜歡，閑來無事，在研究CSS，在網上見到類似的效果，又修改了一下，基本實現了鼠標經過縮略圖放大圖片的功能，主要是運行了CSS的overflow屬性，有興趣的朋友仔細研究一番吧。

<!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=gbk" />
<title>CSS使用overflow屬性實現鼠標經過放大縮略圖</title>
</meta>

<style>

body {
		margin:0;
		padding:40px 80px;
		background:#fff;
		font:70% Arial, Helvetica, sans-serif;
		color:#555;
		line-height:180%;
	}
	
	h1, h2{
		font-size:180%;
		font-weight:normal;
		color:#555;
	}
	h2{
		font-size:140%;
	}	
	p{
		margin:1em 0;
	}
	p.text{
		width:500px;
	}	
	a{
		color:#f20;
		text-decoration:none;
	}
	a:hover{
		color:#999;
	}
	img{
		border:none;
	}
	ul#thumbs, ul#thumbs li{
		margin:0;
		padding:0;
		list-style:none;
	}
	
	ul#thumbs li{
		float:left;
		margin-right:5px;
		border:1px solid #999;	
		padding:2px;
	}
	ul#thumbs a{
		display:block;
		float:left;
		width:100px;
		height:100px;
		line-height:100px;
		overflow:hidden;
		position:relative;
		z-index:1;		
	}
	ul#thumbs a img{
		float:left;
		position:absolute;
		top:-20px;
		left:-50px;	
	}

ul#thumbs a:hover{
			overflow:visible;
			z-index:1000;
			border:none;		
		}
		ul#thumbs a:hover img{
			border:1px solid #999;	
			background:#fff;
			padding:2px;			
		}	
	
	ul#thumbs:after, li#thumbs:after{
			mrc:"."; 
			display:block; 
			height:0; 
			clear:both; 
			visibility:hidden;
		}
		ul#thumbs, li#thumbs{
			display:block;
		}
		ul#thumbs, li#thumbs{
			min-height:1%;
		}
		* html ul#thumbs, * html li#thumbs{
			height:1%;
		}

p.thumb{
		float:left;
		margin:.5em 0;
		margin-right:10px;
		border:1px solid #999;	
		padding:2px;
	}
	p.thumb a{
		display:block;
		float:left;
		width:100px;
		height:100px;
		line-height:100px;
		overflow:hidden;
		position:relative;
		z-index:1;	
	}	
	p.thumb a img{
		float:left;
		position:absolute;
		top:-20px;
		left:-50px;	
	}
	
		p.thumb a:hover{
			overflow:visible;
			z-index:1000;
			border:none;		
		}
		p.thumb a:hover img{
			border:1px solid #999;	
			background:#fff;
			padding:2px;			
		}	
</style>
</head>
<body>
	
	<h2>縮略圖列表</h2>
	<ul id="thumbs">
	<li><a href="/"><img src="http://p1.mb5u.com/texiao/1/2011022516043176.jpg" /></a></li>
	<li><a href="/"><img src="http://p1.mb5u.com/texiao/1/2011022516043177.jpg" /></a></li>
	<li><a href="/"><img src="http://p1.mb5u.com/texiao/1/2011022516043178.jpg" /></a></li>
	<li><a href="/"><img src="http://p1.mb5u.com/texiao/1/2011022516043179.jpg" /></a></li>
	<li><a href="/"><img src="http://p1.mb5u.com/texiao/1/2011022516043180.jpg" /></a></li>
	</ul>
	
	<h2>單個縮略圖</h2>
	<p class="thumb"><a href="/"><img src="http://p1.mb5u.com/texiao/1/2011022516043181.jpg" /></a></p>
	<a href="#">文字介紹</a></p>
</body>
</html>

所屬頻道：圖片特效特效/更新時間：2012-12-15

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

相關圖片特效特效：

CSS使用overflow實現鼠標經過放大縮略圖_圖片特效特效

圖片特效特效Rss訂閱特效代碼搜索

圖片特效特效推薦

猜你也喜歡看這些