JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 project">
        <a href="#">
            <div class="img-overlay">
                <img src="http://placehold.it/500x500" class="img-responsive"/>
                <div class="project-overlay"><span class="centered-text">CENTERED<br />MULTILINE<br /> TEXT</span></div>
            </div>
            <div class="text" style="text-align:center;">
                <h3>Project name</h3>
                <p>Image description</p>
            </div>
        </a>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 project">
        <a href="#">
            <div>
                <img src="http://placehold.it/500x500" class="img-responsive"/>
            </div>
            <div style="text-align:center;">
                <h3>Project name</h3>
                <p>Image description</p>
            </div>
        </a>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 project">
        <a href="#">
            <div>
                <img src="http://placehold.it/500x500" class="img-responsive"/>
            </div>
            <div style="text-align:center;">
                <h3>Project name</h3>
                <p>Image description</p>
            </div>
        </a>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 project">
        <a href="#">
            <div>
                <img src="http://placehold.it/500x500" class="img-responsive"/>
            </div>
            <div style="text-align:center;">
                <h3>Project name</h3>
                <p>Image description</p>
            </div>
        </a>
    </div>
</div>

CSS

.img-overlay {
    position: relative;
    max-width: 500px;
}

.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(41,128,185,0.9);
    color: #fff;
    
}

.text {
    max-width: 500px;
}

.centered-text
{
  display:table;
  height:100%;
  width:100%;
  text-align:center;
  vertical-align:center;
}