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

css, html

Solution

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

Problem

Original source