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{
		opacity:0.3;
        width:420px;
        height:420px;
		}

		.A1 {
		background-image:url('http://i.imgur.com/NNKxZ5R.jpg');
 		filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
		filter: gray; /* IE6-9 */
		-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */ 
		transition: opacity .3s ease-in-out;
		-moz-transition: opacity .3s ease-in-out;
		-webkit-transition: opacity .3s ease-in-out;
		}

		#text {
		color:#ffffff;
		text-align:center;
		font:18px sans serif;
		text-decoration:none;
		}

		div.cell:hover {
		filter: none;
		-webkit-filter: grayscale(0);
		transition: opacity .3s ease-in-out;
		-moz-transition: opacity .3s ease-in-out;
		-webkit-transition: opacity .3s ease-in-out;
		opacity:1.0;
		}