鼠标滑过图片显示半透明文字，边框变色代码

代码简介：

这是个很常见的图片显示特效，当鼠标经过图片的时候，图片上浮动一个半透明的层，层内显示文字，同时图片边框变亮，视觉效果相当好。

代码内容：

View Code

< html >
< head >
< title > 鼠标滑过图片显示半透明文字，边框变色代码_网页代码站(www.webdm.cn) </ title >
< style  type ="text/css" >
body { background : #333 }
img { border : none }
.wrap { margin : 10px ; position : relative ; }
.photo a { position : absolute ; display : block ; border : 1px solid #999 ; padding : 2px }
.photo a:hover { border : 1px solid #fff ; text-decoration : none }
.photo a span  { display : none ; cursor : hand ; text-align : center ; font : bold 12px/30px Verdana, Arial ; }
.photo a:hover span { width : 500px ; margin : 0 2px ; background : #000 ; display : block ; position : absolute ; bottom : 0 ; left : 0 ; color : #fff ; filter : alpha(opacity=60) ; -moz-

opacity : 0.6 ; opacity : 0.6 ; }
</ style >
</ head >
< body >
< div  class ="wrap" >
< div  class ="photo" >< a  href ="#" >
< img  src ="http://www.webdm.cn/images/wall5.jpg"  border ="0"  alt ="" />< span > 英国巨石阵，一直以来都是一个谜，现在它是一处著名的旅游景点。 </ span ></ a ></ div >
</ div >
</ body >
</ html >
< br  />
< p >< a  href ="http://www.webdm.cn" > 网页代码站 </ a >  - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！ </ p >
代码来自：http://www.webdm.cn/webcode/08019f9f-65ee-4426-8e54-795c955fc72d.html

 

转载于:https://www.cnblogs.com/webdm/archive/2011/08/13/2136916.html