<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<title> picture effects that show picture borders and text descriptions when hovering over the mouse </title>
<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;}
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;}
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:D XImageTransform.Microsoft.Alpha (opacity=30) ";}
Ul.gnineh li:hover Img{z-index:999;filter:alpha (opacity=100); Opacity:1;-ms-filter: "Progid:D XImageTransform.Microsoft.Alpha (opacity=100) ";}
Ul.gnineh Li Info{position:absolute;left: -10px; Top: -10px;padding:210px 10px 20px;width:220px;display:none;backgro und: #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;}
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;p adding:10px;}
</style>
<body>
<div><a href= "http://www.999jiujiu.com/" >http://www.999jiujiu.com/</A></div>
<ul class= "Gnineh" >
<li><a href= "/" ></a><div class= "info" ><li><a href= "/" ></a><div class= "info" ><li><a href= "/" ></a><div class= "info" ><li><a href= "/" ></a><div class= "info" ></ul>
</body>
CSS implementation mouse on the picture on the display white border + text description
