JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col-3">
            <div class="videoThum"> <a href="javascript:;"  rel="https://www.youtube.com/embed/OSgvYZpO2xY" class="youTubeVideo" ><img src="http://s8.postimg.org/jf407d2xh/saina_nehwal_syed.png"/></a></div>
               			<div class="caption"><a href="#"><h2>2015 Syed Modi International</h2></a><a href="#"><p>2015 Syed Modi International India Masters SF [WS]</p></a></div>
    </div>

CSS

.youTubeVideo:hover {
  opacity: 0.5;
  background-color: green;
}

.videoThum:hover {
  background-color:  green;
  background-image: url("http://s24.postimg.org/k69rptjk1/play_button.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 50% 50%;
}