title: How to overlay a play button over a video thumbnail image?
body: <p>I got some div thumbnail images. is there a way i can place the  play icon over the thumbnail image just in the <strong>center of thumbs</strong>(my thumbnail images has class name of ItemImage) using css (my play icon has a class name overlayicon)?</p>
  
  <pre><code>&lt;div class="ItemLeft"&gt;
  
  
    &lt;div class="Clipping"&gt;        
      &lt;a class="ImageLink" href="/videos/id8" title="galaxy"&gt;
        &lt;img class="ItemImage" src="/Images/video8.jpg" alt="video 8" /&gt;
        &lt;img class="OverlayIcon" src="/Images/1.png" alt="" /&gt;
      &lt;/a&gt;
      &lt;a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/id1234"&gt;&lt;span class="Text"&gt;51:57&lt;/span&gt;&lt;/a&gt;
    &lt;/div&gt;
  
    &lt;div class="Title"&gt;&lt;a href="/videos/id8" title="galaxy"&gt;galaxy&lt;/a&gt;&lt;/div&gt;
  
    &lt;div class="VideoAge"&gt;1 daybefore&lt;/div&gt;
  
    &lt;div class="PlaysInfo"&gt; broadcast 265&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>my css:</p>
  
  <pre><code>.Item.ItemLeft, .Item.ItemMiddle, .Item.ItemRight
  {
      float:left;
      margin-right:15px;
  }
  .clear
  {
      clear:both;
  }
  
  
  img.ItemImage {
      width: 18em;
      height: 10em;
   }
  
  
  .OverlayIcon {
      position: absolute;
      top: 40px;
      left: 65px;
  }
  </code></pre>