CODEWITHSUNDEEP
htmlcss
user1788736
user1788736

Reputation: 2845

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

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

Upvotes: 10

Views: 41271

Answers (4)

respondcreate
respondcreate

Reputation: 1830

I just wrestled with this problem for a responsive layout and came across this demo and it worked wonderfully.

Upvotes: 0

cristian camilo cede&#241;o gallego
cristian camilo cede&#241;o gallego

Reputation: 4112

.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/

Upvotes: 7

kyooriouskoala
kyooriouskoala

Reputation: 583

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

Upvotes: 5

Naveen Narale
Naveen Narale

Reputation: 42

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.

Upvotes: 1

Related Questions