冰剑'blog

在hulu（美国知名的视频网站）上看到了这个视频缩略图增加一个play的效果，突然心血来潮，就也想做一个这样的效果。

思路：利用a标签，里面包含一个视频缩略图片，鼠标放上去之后，增加边框，图片上增加一个播放按钮，播放按钮用背景图来展示。
a标签里需要放置一个em,默认的时候隐藏，hover的时候em显示出来。

查看演示：http://www.xunzou.com/demo/thumbnail/
下图左边为默认显示效果，右边为鼠标放上去的效果。
 

.vp {width:600px;margin:0 auto;}
.vp a {width:145px;height:80px;display:block;background:#FFF;padding:4px;border:1px solid #333;overflow:hidden;position:relative;float:left;margin:30px 45px 0 0;}
.vp a img {width:145px;height:80px;}
.vp a em {display:none;width:33px;height:32px;background:url(btn-play-big.png) no-repeat;overflow:hidden;text-indent:-999px;}
.vp a:hover {padding:3px;border-width:2px;}
.vp a:hover em {display:block;position:absolute;top:29px;left:61px;z-index:2;cursor:pointer;}

<div class="vp">
    <a href="#">
	<img src="001.jpg" alt="视频名称" />
	<em>点此播放</em>
    </a>
</div>