JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div id="portfolio">
    <div class="row">
        <div class="col-sm-4 portfolio-item "> 
            <a href="#" class="portfolio-link" data-toggle="modal">
                <span class="caption"> 
                    <span class="caption-content"><i>Wall</i></span>
                </span> 
                <i class="fa fa-home fa-5x"></i>
            </a>
        </div>
    </div>
</div>

CSS

#portfolio .portfolio-item {
    right: 0;
    margin: 0 0 15px;
}
#portfolio .portfolio-item .portfolio-link {
    display: block;
    position: relative;
    margin: 0 auto;
    max-width: 400px;
}
#portfolio .portfolio-item .portfolio-link .caption {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: #004DFA;
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
    transition: all ease .5s;
}
#portfolio .portfolio-item .portfolio-link .caption:hover {
    opacity: 0.9;
}
#portfolio .portfolio-item .portfolio-link .fa-home {
    display: block;
    text-align: center;
    color: #000;
    z-index: -1;
}
#portfolio .portfolio-item .portfolio-link .caption .caption-content {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 20px;
    margin-top: -12px;
    text-align: center;
    font-size: 20px;
    color: #fff;
}
#portfolio .portfolio-item .portfolio-link .caption .caption-content i {
    margin-top: -12px;
}
#portfolio .portfolio-item .portfolio-link .caption .caption-content h3, #portfolio .portfolio-item .portfolio-link .caption .caption-content h4 {
    margin: 0;
}
#portfolio * {
    z-index: 2;
}
@media(min-width:767px) {
    #portfolio .portfolio-item {
        margin: 0 0 30px;
    }
}
img.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto
}