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.7;
       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;
		background-image:url('http://i.imgur.com/NNKxZ5R.jpg');
 		filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
		filter: gray; /* IE6-9 */
		-webkit-filter: blur(15px); /* 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 {
	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;
		}