纯CSS3打造的鼠标滑过图片显示图片标题和详细信息

鼠标移动到图片上，图片会高亮显示，并且会显示白色圆角边框，图片的底部会显示该图的标题和描述。纯CSS3，所以不兼容IE8-。
1.在head引入下面的CSS代码。

<style type="text/css">
	body {
		margin: 0;	padding: 0;
		font: normal 10px Verdana, Arial, Helvetica, sans-serif;
		line-height: 1.8em;
		background: #1d1d1d url(bg.jpg) repeat;
		overflow-y:scroll;
	}
	a{color:#999;}
	h1 {
		font-family:Georgia, "Times New Roman", Times, serif;
		text-align: center;
		font-weight: normal;
		font-size: 4em;
		line-height: 1.2em;
		margin: 0; padding: 20px 0;
		color:#999;
		font-size:18px;
	}
	img {border: none;}
	/****** Gnineh  www.mobanwang.com ******/
	ul.gnineh {width: 960px;list-style: none;margin: 0 auto; padding: 0;}
	ul.gnineh li {width: 220px;float: left; display: inline;margin: 10px; padding: 0;position: relative;}
	ul.gnineh li:hover {z-index: 99;}
	ul.gnineh li img {position: relative;filter: alpha(opacity=30);opacity: 0.3;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";}
	ul.gnineh li:hover img{z-index: 999;filter: alpha(opacity=100);opacity: 1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}
	ul.gnineh li .info {position: absolute;left: -10px; top: -10px;padding: 210px 10px 20px;width: 220px;display: none;background: #fff;font-size: 1.2em;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
	ul.gnineh li:hover .info {display: block;}
	ul.gnineh li h2 {font-size: 1.2em;font-weight: normal;text-transform: uppercase;margin: 0; padding: 10px 0;}
	ul.gnineh li p {padding: 0; margin: 0; font-size: 0.9em;}
	/****** Gnineh End ******/
	body{font-size:12px;font-family:'Arial';line-height:25px;}
	#header{background:#000;height:30px;line-height:30px;margin-bottom:20px;}
	#header h2{float:left;margin:0px 10px;}
	#header h2 a{color:#fff;}
	#main{width:950px;margin:0px auto}
	.code{border:#ccc 1px solid;background:#ffffcc;padding:10px;}
</style>

2、在body引入下面的html代码：

<ul class="gnineh">
	<li>
		<a href="http://www.5imoban.net/"><img src="images/virgin.jpg" alt=""></a>
        <div class="info">
			<h2>处女赛车跑</h2>
            <p>新车上市，时速堪比波音。</p>
        </div>
	</li>
	<li>
		<a href="http://www.5imoban.net/"><img src="images/dkng.jpg" alt=""></a>
        <div class="info">
			<h2>我的小狗</h2>
            <p>现在已经魂丧车下</p>
        </div>
	</li>
	<li>
		<a href="http://www.5imoban.net/"><img src="images/dconstruct.jpg" alt=""></a>
        <div class="info">
			<h2>梦中情人</h2>
            <p>回首一眸，万物俱焚。</p>
        </div>
	</li>
	<li>
		<a href="http://www.5imoban.net/"><img src="images/hugsformonsters.jpg" alt=""></a>
        <div class="info">
			<h2>过市区</h2>
            <p>穿过霓虹，是她不变的身影 </p>
        </div>
	</li>
	<li>
		<a href="http://www.5imoban.net/"><img src="images/hugsformonsters.jpg" alt=""></a>
        <div class="info">
			<h2>过市区</h2>
            <p>穿过霓虹，是她不变的身影 </p>
        </div>
	</li>
	<li>
		<a href="http://www.5imoban.net/"><img src="images/dconstruct.jpg" alt=""></a>
        <div class="info">
			<h2>梦中情人</h2>
            <p>回首一眸，万物俱焚。</p>
        </div>
	</li>
	<li>
		<a href="http://www.5imoban.net/"><img src="images/dkng.jpg" alt=""></a>
        <div class="info">
			<h2>我的小狗</h2>
            <p>现在已经魂丧车下</p>
        </div>
	</li>
	<li>
		<a href="http://www.5imoban.net/"><img src="images/virgin.jpg" alt=""></a>
        <div class="info">
			<h2>处女赛车跑</h2>
            <p>新车上市，时速堪比波音。</p>
        </div>
	</li>
	<li>
		<a href="http://www.5imoban.net/"><img src="images/virgin.jpg" alt=""></a>
        <div class="info">
			<h2>处女赛车跑</h2>
            <p>新车上市，时速堪比波音。</p>
        </div>
	</li>
	<li>
		<a href="http://www.5imoban.net/"><img src="images/dkng.jpg" alt=""></a>
        <div class="info">
			<h2>我的小狗</h2>
            <p>现在已经魂丧车下</p>
        </div>
	</li>
	<li>
		<a href="http://www.5imoban.net/"><img src="images/dconstruct.jpg" alt=""></a>
        <div class="info">
			<h2>梦中情人</h2>
            <p>回首一眸，万物俱焚。</p>
        </div>
	</li>
	<li>
		<a href="http://www.5imoban.net/"><img src="images/hugsformonsters.jpg" alt=""></a>
        <div class="info">
			<h2>过市区</h2>
            <p>穿过霓虹，是她不变的身影 </p>
        </div>
	</li>
</ul>

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！