CSS allows you to move the cursor over an image to display a white border + text description, and a css border
<! 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 = gb2312">
<Title> displays the image effects of the border and text description 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: 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 ;}
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>
</Head>
<Body>
<Div> http://www.999jiujiu.com/</div>
<H1> CSS-only image effects with the mouse hitting the display border and description <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>
</Html>