How can I add a transparent image overlay on top of a video?


I currently have a series of video thumbnails that play/pause when onmouseover or onmouseout occurs. I would like to add a logo with a transparent background (a .png file) that sits on top of the video and then disappears and reappears when onmouseover or onmouseout occurs while maintaining the play and pause functionality.

I tried using poster="url" but I have not been able to achieve transparency over the video thumbnail or retain the play/pause functionality. Any help is greatly appreciated. Sorry in advance for what I’m guessing is ugly code. I’m way out of my element trying to get this to work. is a good reference for the functionality I’m seeking.

      <a href=/districtvision>
         <video onmouseover=";" onmouseout="this.pause();" loop muted width=100%>
            <source src="" type="video/ogg">


I’d throw them both in a position:relative div with a class that hides a contained img on hover. You still have to tell the img where to be within the div.

  .gone:hover img{display:none;}

<a href=/districtvision>
  <div class="gone" style="position:relative;">
    <img src="yourImage.png" style="position:absolute;z-index:1;">
    <video onmouseover=";" onmouseout="this.pause();" loop muted width="100%">
      <source src="" type="video/mp4">

Answered By – joshnishikawa

Answer Checked By – Dawn Plyler (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.