JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
		<div id="row">			
<div class="cell A1"><div id="text"><b>SPINDRIFT KIOSK</b></br>Digital Collage</br><i>Mikey</i></div></div>
</div></div>

CSS

body{
		margin:0;
		padding:0;
		background-color:black;
		}

.cell{
       width:420px;
        height:420px;
		transition: opacity .3s ease-in-out;
		-moz-transition: opacity .3s ease-in-out;
		-webkit-transition: opacity .3s ease-in-out;
}

.A1 {
    position: relative;
}
.A1:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
		transition: opacity .3s ease-in-out;
		-moz-transition: opacity .3s ease-in-out;
		-webkit-transition: -webkit-filter .6s ease-in-out;
		background-image:url('http://i.imgur.com/NNKxZ5R.jpg');
 		filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
		filter: gray; /* IE6-9 */
		-webkit-filter: grayscale(50%) brightness(50%); /* Google Chrome, Safari 6+ & Opera 15+ */ 
    z-index: -1;
}

		#text {
		color:#ffffff;
		text-align:center;
		font:18px sans serif;
		text-decoration:none;
		}
.cell:hover {
	opacity:1.0;
}

.A1:hover:before {
	-webkit-filter: none;
		}