效果预览：http://keleyi.com/keleyi/phtml/divcss/24.htm
原图：
效果图：
HTML文件代码：
?
HTML文件代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS给图片加上播放按钮 - 柯乐义</title>
<style>
.keleyiImgBox img {
display: block;
}
.keleyiImgBox li {
position: relative;
list-style-type: none;
border: 1px solid #ccc;
padding: 3px;
float: left;
}
.keleyitoolbar {
position: absolute;
bottom: 15px;
right: 15px;
}
</style>
</head>
<body>
<div>
<ul id="imgBox" class="keleyiImgBox">
<li><a href="http://keleyi.com/" target="_blank"><img src="http://keleyi.com/keleyi/phtml/divcss/24/hovertreegirl.jpg" width="200" height="150" border="0" /></a><div class="keleyitoolbar"><a href="http://tool.keleyi.com/" target="_blank" title="播放"><img src="http://keleyi.com/keleyi/phtml/divcss/24/hovertreeplay.png" border="0"></a></div></li>
</ul>
<div style="clear:both"><a href="http://keleyi.com" target="_blank">柯乐义</a> <a href="http://hovertree.com/texiao/">特效库</a> <a href="http://keleyi.com/a/bjae/ygwcbhl2.htm">原文</a> <a href="http://hovertree.com">HoverTree</a> </div>
</div>
</body>
</html>
?
?
网页特效汇总：http://ini.iteye.com/blog/2165698
原文：http://ini.iteye.com/blog/2218640