How to overlay a play button over a video thumbnail image?

Question

I got some div thumbnail images. is there a way i can place the play icon over the thumbnail image just in the center of thumbs(my thumbnail images has class name of ItemImage) using css (my play icon has a class name overlayicon)?

<div class="ItemLeft">


  <div class="Clipping">        
    <a class="ImageLink" href="/videos/id8" title="galaxy">
      <img class="ItemImage" src="/Images/video8.jpg" alt="video 8" />
      <img class="OverlayIcon" src="/Images/1.png" alt="" />
    </a>
    <a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/id1234"><span class="Text">51:57</span></a>
  </div>

  <div class="Title"><a href="/videos/id8" title="galaxy">galaxy</a></div>

  <div class="VideoAge">1 daybefore</div>

  <div class="PlaysInfo"> broadcast 265</div>

</div>

my css:

.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;
}

Answer 1

You can use position: absolute on your .OverlayIcon. For example:

.ImageLink {
    height: 300px;
    width: 350px;
    position: relative;
    display: block;
}
.ItemImage {
    height: 300px;
    width: 350px;
}
.OverlayIcon {
    position: absolute;
    top: 40px;
    left: 65px;
}

Working example: http://jsfiddle.net/shodaburp/9nEua/

Update based on user1788736's first comment

The above solution only works if all the heights are the same and fixed. You'd then need to adjust the top and left values based on the height of your playButton.png dimension.

If you could provide a jsFiddle of what you currently have (html, css, jQuery) then it's easier to adjust the positioning more accurately.

Update based on user1788736's second comment

I uploaded a dummy image on my server that has the same size (56px x 37px). Here's the updated version of your fiddle: http://jsfiddle.net/shodaburp/k6yAQ/1/

Extra info based on user1788736's third comment

When you say "how to find values for overlayicon w and h?" I assume you are actually looking for top and left value for .OverlayIcon. Do correct me if I'm wrong.

First of all, if you don't intend to have a function on your site that enables zooming/enlargment, just stick with px as unit measurement for images.

Based on your jsFiddle thumb dimension, 12em x 10em is equivalent to 192px x 160px.

The formula to get the top and left values for .OverlayIcon is as follows:

OverlayIconTop = (ItemImageHeight - OverlayIconHeight )/2
OverlayIconTop = ( 160 - 37 ) / 2 = 61.5 

(Round to 61 or 62 since we can't have decimal for px)

OverlayIconLeft = (ItemImageHeight - OverlayIconHeight )/2
OverlayIconLeft = ( 192 - 56 ) / 2 = 68

Answer 2

.container{
   position: relative;
   width: 200px;
}

.container img{
   width: 200px;
}

.container .play-icon{
  cursor: pointer;
  position: absolute;
  top : 50%;
  left : 50%;
  transform: translate(-50%, -50%);
}

svg:hover #play-svg{
  fill: #CC181E;
}

[Working example using svg]http://jsfiddle.net/4L2xea4u/

Answer 3

You can make the thumbnail image as the background and then have the play button image over it, you can also define the a attribute as a block and make the entire area clickable.