JSFiddle - React, Tailwind, and code Playground

by Jiff Pom

HTML

<div class="area">
          <div class="mask">
            <div class="vertical-align">
              <img src="http://placehold.it/50x50">
              <p>Play Now</p>
            </div>
          </div>
        <img src="http://placehold.it/300x300" alt="video"> 
        </div>

        <h2>Title</h2>
        <p>Paragraph</p>

CSS

.video {
    width:300px;
}

.area:hover .mask{
    opacity: 1;
    width: 300px;
    height: 300px;
    cursor: pointer;
        background-color: rgba(226,23,37,0.9);
        text-align: center;}

.vertical-align{
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
        text-align: center;
}

.mask{
    position: absolute;
    opacity: 0;
    width: 300px;
    height: 300px;
    transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}