CODEWITHSUNDEEP
htmlcss
Sam
Sam

Reputation: 165

Stuck overlaying a play button ontop of a thumbnail image

I'm trying to overlay a play button onto a thumbnail image.

On clicking the image a lightbox appears showing the video (using Colorbox Drupal module).

I've tried wrapping the image in a div called "newvideo" which has the background image of my play button. However I can't seem to get it to show!

The code

<style>
video {
  max-width: 580px;

.newvideo { position: relative; }

.newvideo a {
   position: absolute;
   display: block;
   background: url(http://www.workbooks.com/sites/default/files/image/play-button-crm-homepage2.png);
   height: 55px;
   width: 57px;
   top: 60px;
   left: 130px;
}

.newvideo a:hover {
       background: url(http://www.workbooks.com/sites/default/files/image/play-button-crm-homepage-11.png);
}

</style>

HTML

   <div style="display: none;">
<div id="id-of-content">
<video controls poster="/sites/default/files/image/crm-systems-poster_0.png">
  <source src="/sites/default/files/image/CRM-Systems-Video.ogv" type="video/ogg">
  <source src="/sites/default/files/image/CRM-Systems-Video.mp4" type="video/mp4">

  <img src="http://www.workbooks.com/sites/default/files/image/crm-system-image.png" title="CRM System image">

</video>
</div>
</div>

     <div class="newvideo">
         <a class="colorbox-inline" href="http://www.workbooks.com/sites/default/files/image/CRM-Systems-Video.mp4?width=580&height=330&inline=true#id-of-content">
        <img src="http://www.workbooks.com/sites/default/files/image/CRM-Systems-Video.png" title="CRM System image"> </a>
        </div>

Any advice?

Fidde: http://jsfiddle.net/8ojo5m88/3/

Upvotes: 0

Views: 1573

Answers (2)

Shaggy
Shaggy

Reputation: 6796

If you place an image within an element, it sits over the background of that element so, unless that image has transparency, you're not going to be able to see the background.

One way to achieve what you want, without the need for any additional markup, is to use an absolutely positioned pseudo element on the <a> tag.

More information on pseudo elements

EXAMPLE (Updated to include :hover state)

a{
    display:inline-block;
    position:relative;
}
a:after{
    background:url(http://www.workbooks.com/sites/default/files/image/play-button-crm-homepage2.png) center center no-repeat;
    bottom:0;
    content:"";
    display:block;
    left:0;
    position:absolute;
    right:0;
    top:0;
}
a:hover:after{
  background-image:url(http://www.workbooks.com/sites/default/files/image/play-button-crm-homepage-11.png);
}
<a href="#"><img src="http://www.workbooks.com/sites/default/files/image/CRM-Systems-Video.png"></a>

Upvotes: 3

Nilesh Mahajan
Nilesh Mahajan

Reputation: 3516

Can you please check the fiddle https://jsfiddle.net/nileshmahaja/p5Ldd3cc/

I have altered your HTML markup and modified CSS code. please have a close look

HTML:

 <div class="newvideo">
     <a class="colorbox-inline" href=""></a>
     <img src="http://www.workbooks.com/sites/default/files/image/CRM-Systems-Video.png" title="CRM System image" /> 
    </div>

CSS:

newvideo { 
    position: relative;
    width:320px
}

.newvideo a {
   position: absolute;
   display: block;
   background: url(http://www.workbooks.com/sites/default/files/image/play-button-crm-homepage2.png);
   height: 55px;
   width: 57px;
   top: 0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}

.newvideo a:hover {
       background: url(http://www.workbooks.com/sites/default/files/image/play-button-crm-homepage-11.png);
}

Upvotes: 0

Related Questions