JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="row">
        <div class="cell A1"></div>
        <div id="text">
            <b>SPINDRIFT KIOSK</b>
            <br/>
            Digital Collage
            <br/>
            <i>Mikey</i>
        </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 {
		position:absolute;
        top:10px;
        left:25%;
		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;
		}