<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>css filter background transparent hint </title> <style> *{margin:0; body{margin:0 Auto; font-size:12px;} . model{margin:0 auto; width:30px;} . Model a:hover{Text-decoration:none; Model A img{border: #fff 1px solid;} . Model A:hover img{border: #888 1px dotted;} Model A span{padding:0; display:block; width:80px; height:50px; margin-top:-32px; overflow:hidden; line-height:14px; Filter:alpha (opacity=0); opacity:.0; Cursor:pointer; Text-align:center;} Model a:hover span{color: #fff; background: #000; padding:0; display:block; width:84px; height:54px; margin:-36px 0 0 1px! Important margin:-36px 0 0 0px; Overflow:hidden; line-height:16px; Filter:alpha (opacity=60); opacity:.6; Text-align:left; TExt-align:center;} . model2{margin:0 auto; width:30px;} . Model2 a:hover{Text-decoration:none; . Model2 a img{border: #fff 1px solid;} . Model2 a:hover img{border: #888 1px dotted;} . Model2 a span{padding:0; display:block; width:180px; height:50px; margin-top:-32px; overflow:hidden; line-height:14px ; Filter:alpha (opacity=0); opacity:.0; Cursor:pointer; Text-align:center;} Model2 a:hover span{color: #fff; background: #000; padding:0; display:block; width:480px; height:16px; margin:-36px 0 0 1p X!important; margin:-20px 0 0 0px; Overflow:hidden; line-height:16px; Filter:alpha (opacity=60); opacity:.6; Text-align:left; Text-align:center;} </style> </pead> <body> <div class= "model" ><span> am I cute? </span></div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
