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.

![alt text][1]


**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.

  [1]: http://i.stack.imgur.com/16hr1.png
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.

![alt text][1]


**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.

  [1]: http://i.stack.imgur.com/16hr1.png