How to make video thumbnails like Facebook [CSS]
I am looking to make video thumbnails like on facebook but I am not able to get that play button over the thumbnail like on facebook.
CODE
HTML
<a href="watch-video.php?c=1244">
<img src="http://img.youtube.com/vi/X0OdLlX-cIw/1.jpg">
<b></b>
</a>
CSS
.wall_video a {display: block; width: 128px; height: 96px; padding: 4px; border: 1px solid #cccccc; position: relative}
.wall_video a img {display: block; width: 128px; height: 96px; }
.wall_video开发者_如何学运维 a b {background: url(images/play-icon.png) no-repeat; display: block; width: 28px; height: 30px; position: absolute;}
When I try to float the img
then the button goes right on top. At first I thought its position:relative and negative top margin but when I checked the source of facebook they dont use relative positioning.
.wall_video a b {
/* ... */
position: absolute;
left: 5px;
bottom: 5px;
}
精彩评论