JSFiddle - React, Tailwind, and code Playground

HTML

<div class="card-container">
    <div class="card">
        <div class="front block">
            <img src="http://lorempixel.com/g/400/300/" class="img-responsive"/>
        </div> 
        <div class="back block">
           <h3>Heading</h3>
           <h4>Sub-Heading</h4>
           <p>Dummy text Dummy text Dummy text Dummy text 
                Dummy text Dummy text Dummy text Dummy text Dummy text 
           </p>
        </div> 
    </div> 
</div>

CSS

.card-container{
    height: 300px;
    position: relative;
    width: 400px;
}

.block{
    position: absolute;
}

.back{
    color: white;
    padding: 20px;
    background: red;
    height: 260px;
    z-index: -1;
}

h3{
    font-size: 2em;
}
h4{
    font-size: 1.7em;
}

.card-container:hover .front{
    opacity: .7;
}