JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main_image">
    <div id="video"></div>

 <a href="#" id="showVideo">
    <img src="http://static.ddmcdn.com/gif/11-billion-people.jpg">
        <div class="playbutton">
                <img class="image" src="http://www.onyxga.com/images/Play-Button.png">
                <img class="image hover" src="http://www.clipartbest.com/cliparts/M9c/pjy/M9cpjydTE.png">
        </div>
        <div id="title">Video Title</div>
 </a>
            
</div>

CSS

.main_image img{
    position:absolute;
    width:600px;
    height: 300px;
    top:5px;
    left:5px;
}

#video {
    display:none;
    position:absolute;
    top:5px;
    left:5px;
    width:600px;
    height: 300px;
    z-index:1;
}

.playbutton {
    display:none;
}

.playbutton img{
    position:absolute;
    top: 140px;
    left:260px;
    height:50px;
    width:50px;
}

div:hover.playbutton img.image{
    display:none;
}
.playbutton img.hover{
    display:none;
}
div:hover.playbutton img.hover{
    display:block;
}

#title {
    border:1px solid black;
    background:white;
    height:20px;
    width:100px;
    position:absolute;
    left:70px;
    top:70px;
}

JavaScript

$('#showVideo').click(function() {
    $('#video').show().html('<iframe src="http://player.vimeo.com/video/122447979?title=0&amp;byline=0&amp;portrait=0&amp;color=d01e2f&amp;autoplay=1" width="600" height="300" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>');
});

   $(".main_image").mouseenter(function()
   {
       $(".playbutton").fadeIn(100);                    
   });
    
   $(".main_image").mouseleave(function()
   {
       $(".playbutton").fadeOut(100);                    
   });