鼠标经过图片时出现半透明文字特效

最新推荐文章于 2022-02-13 21:28:51 发布

weixin_34015336

最新推荐文章于 2022-02-13 21:28:51 发布

阅读量364

点赞数

原文链接：http://www.cnblogs.com/conbios/p/3909013.html

版权

鼠标经过图片时出现半透明文字的效果

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>当鼠标经过图片时，出现半透明的文字</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="/***/***.jpg" border="0" alt=""/><span>you are a marvel！</span></a></div>
</div>
</body>
</html>