求一个网站前端特效（鼠标经过图片左侧滑动文字说明）
如上如，每张图片内都有绿色部分，鼠标经过图片时，绿色部分会从左到右滑动出一个文字说明，效果就像第一个图一样。请看清楚，是“滑动”出来的效果。大神快来帮忙。...
如上如，每张图片内都有绿色部分，鼠标经过图片时，绿色部分会从左到右滑动出一个文字说明，效果就像第一个图一样。请看清楚，是“滑动”出来的效果。 大神快来帮忙。
展开
3个回答
展开全部
纯CSS代码特效，当鼠标经过图片时，图片弹出说明文字，文字背景半透明，同时图片的边框会变换颜色。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标经过图片,边框变色,图片上出现半透明文字</title>
<style type="text/css">
img{border:none}
.wrap{margin:8px;position:relative;}
.photo a{position:absolute;display:block;border:1px solid #888888;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=56);-moz-opacity:0.6;opacity:0.6;}
</style>
</head>
<body>
<div class="wrap">
<div class="photo"><a href="#">
<img src="/jscss/demoimg/wall7.jpg" border="0" alt=""/><span>坝上春色，景色迷人</span></a></div>
</div>
</body>
也可以自行改进，希望对你有帮助。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标经过图片,边框变色,图片上出现半透明文字</title>
<style type="text/css">
img{border:none}
.wrap{margin:8px;position:relative;}
.photo a{position:absolute;display:block;border:1px solid #888888;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=56);-moz-opacity:0.6;opacity:0.6;}
</style>
</head>
<body>
<div class="wrap">
<div class="photo"><a href="#">
<img src="/jscss/demoimg/wall7.jpg" border="0" alt=""/><span>坝上春色，景色迷人</span></a></div>
</div>
</body>
也可以自行改进，希望对你有帮助。
追问
是从左侧滑动出来啊 大神
追答
我这个没有js，纯css制作的。如果想将文字，从右侧划过:
$(".test").hover(function(){
$(this).stop().animate({marginLeft:"12px"},400);
},function(){
$(this).stop().animate({marginLeft:"0px"},400);
});
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
