JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page works-list flex">
    <div class="work-prev">
        <img src="https://lh3.googleusercontent.com/-s5GLpIZE_hA/Usl13KpTc8I/AAAAAAAAAXQ/hM4P0GanEhM/w1223-h678-no/1.jpg" />
        
        <div class="mask flex">
            <h2>Hover Style #1</h2>
                <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                <a href="#" class="info">Read More</a>
        </div>
    </div>
    
     <div class="work-prev">
        <img src="https://lh3.googleusercontent.com/-s5GLpIZE_hA/Usl13KpTc8I/AAAAAAAAAXQ/hM4P0GanEhM/w1223-h678-no/1.jpg" />
        
        <div class="mask flex">
            <h2>Hover Style #1</h2>
                <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                <a href="#" class="info">Read More</a>
        </div>
    </div>
</div>

CSS

* {padding: 0; margin: 0;}

html, body {
    width: 100%;
    height: 100%;
    background-color: #2B313D;
    font-family: 'Oswald', Arial, sans-serif;
    font-size: 13px;
}

.flex {
    /* display: -webkit-box;      
    display: -moz-box;         
    display: -ms-flexbox;      
    display: -webkit-flex; */ 
    display: flex; 
}

.works-list { 
    width: 100%;
    height: 100%;
    justify-content: center;
    -webkit-flex-flow: row wrap;
    align-content: flex-start;   
}

.work-prev {
    width: 400px;
    height: auto;
    position: relative;
    margin: 10px 10px;
    overflow: hidden;
}

.work-prev img{
  width: 400px;
  height: auto;  
} 

.work-prev .mask {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    text-align: center;
    position: absolute;
    flex-flow: row wrap;
    align-content: center;
    justify-content: center; 
    transition: .4s ease-in-out;
    background-color: rgba(219,127,8, 0.6);
     
}

.work-prev .mask .info {
    transition: .3s ease;
}


.work-prev .mask p {
    transform: translateY(100px);
    opacity: 0;
    transition: .3s  linear;
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 15px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center;
   
}

.work-prev .mask h2 {
    transform: translateY(-100px);
    opacity: 0;
    display: block;
    width: 100%; 
    transition: .3s ease-in-out;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0;
}

.work-prev .mask a.info {
    opacity: 0;
    display: inline-block;
    text-decoration: none;
    padding: 7px 12px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000;
}

.work-prev img {
    transition: .2s linear;
}

.work-prev:hover img {
    transform: scale(1.1,1.1);
}

.work-prev:hover...