How to add image on youtube thumbnail

Question

I'd like to create youtube thumbnails with an image on them, like in this example: image example

I know how to get youtube image with php but not how to add the sign of "play" on it.

Answer 1

You Have take one div bottom of that image thumbnails and there is two way. 1. you can insert that play image in the image tag inside that div. 2. give the background to that div as the play image.

Then You have to Give css. the thumbnail image.

.thumbnails{
 position:relative;
 display:inline-block;
  }

And the div following css.

.play{
 position:absolute;
 z-index:999;
top:100px;
left:100px;
right:0px;
bottom:0px;
  }

Change the value of the right left bottom top to set you play image on the thumbnails

hope this is work.

You can check Following links as references.

How do I position one image on top of another in HTML?

http://www.corelangs.com/css/box/ontop.html

https://drupal.stackexchange.com/questions/167500/how-to-absolute-position-an-image-over-another-image