JSFiddle - React, Tailwind, and code Playground

by web tiki

HTML

<div id="container">
    <div id="row">
        <div class="cell A1">
            <img class="spacer" src="http://imgur.com/t5M1ryQ">
            <div id="text">MIKEY
                <br/>
                <p>SPINDRIFT KIOSK</p>DIGITAL COLLAGE</div>
        </div>
        <div class="cell A2">
            <img class="spacer" src="http://imgur.com/t5M1ryQ">
            <div id="text">ERIC
                <br/>
                <p>LIZ & RYAN HEMSWORTH</p>ALBUM DESIGN</div>
        </div>
        <div class="cell A3">
            <img class="spacer" src="http://imgur.com/t5M1ryQ">
            <div id="text">MIKEY
                <br/>
                <p>EPHEMERA</p>DIGITAL COLLAGE</div>
        </div>
        <div class="cell A4">
            <img class="spacer" src="http://imgur.com/t5M1ryQ">
            <div id="text">ERIC
                <br/>
                <p>REJJIE SNOW</p>SITE DESIGN</div>
        </div>
    </div>

CSS

.A1, .A2, .A3, .A4 {
    position:relative;
}
.A1:before, .A2:before, .A3:before, .A4:before {
    content:"";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    transition: opacity .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out;
    -webkit-transition: -webkit-filter .2s ease-in-out;
    filter: url(filters.svg#grayscale);
    /* Firefox 3.5+ */
    filter: gray;
    /* IE6-9 */
    -webkit-filter: grayscale(90%) brightness(30%);
    /* Google Chrome, Safari 6+ & Opera 15+ */
    z-index: -1;
}
.A1:before {
    background-image:url('spindrift.jpg');
    background-size:cover;
}
.A2:before {
    background-image:url('daynnite.jpg');
    background-size:cover;
}
.A3:before {
    background-image:url('');
    background-size:cover;
}
.A4:before {
    background-image:url('');
    background-size:cover;
}
.A1:hover:before, .A2:hover:before, .A3:hover:before, .A4:hover:before {
    -webkit-filter:none;
}
/* text hover */
 div.cell:hover #text {
    opacity:0;
}
#text {
    opacity:1;
    display:table;
    position:absolute;
    z-index:999;
    color:#ffffff;
    text-align:center;
    width:100%;
    top:44%;
    left:0;
    text-decoration:none;
}
p {
    font:16px ProximaNovaBold, sans serif;
    margin:0;
    padding:1 0 1 0;
}
/* table rules */
 #container {
    display:table-row;
    width:100%;
}
#row {
    display:table-row;
    width:100%;
}
.cell {
    position:relative;
    display:table-cell;
    width:700px;
    height:auto;
}
html {
    margin:0;
    padding:0;
    height:100%;
    width:100%;
}
body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    background-color:black;
    color:black;
}
/* image SPACER rules */
 img {
    max-height:600px;
    max-width:100%;
    height:auto;
    width:100%;
    z-index:2;
    display:block;
}