title: How to make video thumbnails like Facebook [CSS]
body: <p>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.</p>
  
  <p><img src="https://i.stack.imgur.com/16hr1.png" alt="alt text"></p>
  
  <p><strong>CODE</strong></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;a href="watch-video.php?c=1244"&gt;
      &lt;img src="http://img.youtube.com/vi/X0OdLlX-cIw/1.jpg"&gt;
      &lt;b&gt;&lt;/b&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.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;}
  </code></pre>
  
  <p>When I try to float the <code>img</code> 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.</p>