JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="rig">
    <li>
        <a class="rig-cell" href="#">
            <img class="rig-img" src="images/awards/AIA.jpg">
            <span class="rig-overlay"></span>
            <span class="rig-text">2015<br>AIA VT <br>Honor Award<br>Champlain Modern</span>
        </a>
    </li>
    <li>
        <a class="rig-cell" href="#">
            <img class="rig-img" src="images/awards/HomeBuilder_Remodelers_Award.jpg">
            <span class="rig-overlay"></span>
            <span class="rig-text">2014 <br>
            HBRA<br> Better Homes Awards<br> Best Single Family<br>Sunset Cliff</span>
        </a>
    </li>
    <li>
        <a class="rig-cell" href="http://static1.1.sqspcdn.com/static/f/404214/24775679/1398271103013/VTASLA+Fall+2013+Newsletter.pdf?token=5Ms0c1CrbEJrn%2FoM%2BVuLRA%2FlUT0%3D">
            <img class="rig-img" src="images/awards/AmericanSocietyLandscapeArchitects.jpg">
            <span class="rig-overlay"></span>
            <span class="rig-text"> 2013 <br>
            ASLA, Vermont<br> Award of Excellence<br>Quaker Bluff Residence</span>
        </a>
    </li>
    </ul>

CSS

#rig {
    max-width:900px;
    margin:0 auto; /*center aligned*/
    padding:0;
    font-size:0; /* Remember to change it back to normal font size if have captions */
    list-style:none;
}
#rig li {
    display: inline-block;
    *display:inline;/*for IE6 - IE7*/
    width:25%;
    vertical-align:middle;
    box-sizing:border-box;
    margin:0;
    padding:0;
}
        
/* The wrapper for each item */
.rig-cell {
    /*margin:12px;
    box-shadow:0 0 6px rgba(0,0,0,0.3);*/
    display:block;
    position: relative;
    overflow:hidden;
}
        
/* If have the image layer */
.rig-img {
    display:block;
    width: 100%;
    height: auto;
    border:none;
    transform:scale(1);
    transition:all 1s;
}

#rig li:hover .rig-img {
    transform:scale(1.05);
}
        
/* If have the overlay layer */
.rig-overlay {
    position: absolute;
    display:block;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background: #8d8d8d url(img/link.png) no-repeat center 20%;
    background-size:50px 50px;
    opacity:0;
    filter:alpha(opacity=0);/*For IE6 - IE8*/
    transition:all 0.6s;
}
#rig li:hover .rig-overlay {
    opacity:0.8;
}

/* If have captions */
.rig-text {
    box-sizing:border-box;
    position:absolute;
    width:100%;
    text-align: justify;
    text-align-last: center;
    text-transform:capitalize;
    font-size:12px;
    font-weight:bold;
    font-family: 'Oswald', sans-serif;
    font-weight:normal!important;
    top: 50%;
    left: 50%;
    color:white;
    opacity:0;
    filter:alpha(opacity=0);/*For older IE*/
    display: block;
}
#rig li:hover .rig-text {
    transform:translate(-50%,-50%);
    opacity:1;
}

@media (max-width: 9000px) {
    #rig li {
        width:23%;
		margin-right:2%;
		margin-bottom:2%;
    }
}

@media (max-width: 992px) {
    #rig li {
        width:31.25%;
		margin-right:2%;
		margin-bottom:2%;

    }
}

@media (max-width: 550px) {
    #rig li {
        width:75%;
				margin-bottom:2%;

    }
}