HTML给图片加上播放按钮

效果预览:http://keleyi.com/keleyi/phtml/divcss/24.htm


原图:
HTML给图片加上播放按钮

效果图:
HTML给图片加上播放按钮

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

你可能感兴趣的:(html,UI,Web,css,html5)