JSFiddle - React, Tailwind, and code Playground

by Anderson Barreto Furlan

HTML

<div class="video">
  <a href="#" title="Titulo do video">
      <img src="http://www.soccerimg.info/wp-content/uploads/2014/04/Ball-design-for-soccer-250x150.jpg" alt="thumbnail"/>
      <span class="play"></span>    
  </a>
</div>

CSS

.video { 
    width: 250px; 
    height: 150px; 
}   
.video a { 
    text-decoration: none; 
    display:block; 
}
.video a span.play {
    display:block;
    background: url('https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/play_store-32.png') center center no-repeat; 
    margin: -120px 10px 0 0; 
    height: 80px; 
    position: relative; 
    z-index: 100; 
    opacity: 0.8; 
    filter: alpha(opacity=80); 
}
.video a:hover span.play { 
    background:url('https://cdn3.iconfinder.com/data/icons/social-circle/512/social_4-32.png') center center no-repeat;
}