CSS3 Grayscale and hover animation on pictorgrams

dabblet.css

/**
 * CSS3 Grayscale and hover animation on pictorgrams
 */
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css');

html, body {
	font-family: Arial, Verdana, sans-serif;
}
a:link, a:visited, a {
	color: #000;
	text-decoration: none;
}

.fa.emptyCheckbox:hover:before {
	content: "\f046";
	color: green;
}

.fa.emptyCheckbox:before {
	content: "\f096";
	font-size: 30px;
	transition: all .5s;	
}

.descisionContainer {
	clear: both;
}

.descisionBox {
	float: left;
	width: 300px;
	padding: 10px;
	height: auto;
	text-decoration: none;
	transition: all .5s;
}
.descisionBox .fa {
	font-size: 25px;
	vertical-align: middle;
}

.descisionTree:not(.completed):hover {
	background: #eee;
}

.descisionTree .fa-check {
	font-size: 30px;
	color: green;
}

.descisionTree {
	display: table; 
	border-bottom: 1px solid #ccc;
	padding: 10px;
	transition: all .5s;
	cursor: pointer;
	text-decoration: none;
}
.descisionTree img {
	width: 50px;
	margin-right: 20px;
	transition: width .5s;
}
.descisionTree img:hover {
	width: 55px;
}
.descisionTree span {
	display: table-cell;
	vertical-align: middle;
	width: 600px;
}

.descisionTree.completed {
	color: #999;
	opacity: 0.4;
	cursor: default;
}

.descisionTree.completed img {
    -webkit-filter: grayscale(100%);
       -moz-filter: grayscale(100%);
         -o-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
            filter: grayscale(100%); 
}

dabblet.html

<a href="#" class="descisionTree completed">
	<img src="https://cdn1.iconfinder.com/data/icons/Isloo_icons_by_IconFinder/128/light_bulb.png" />
	<span>Stap 1</span>
</a>

<a href="#" class="descisionTree completed">
	<img src="https://cdn1.iconfinder.com/data/icons/Isloo_icons_by_IconFinder/128/home_house.png" />
	<span>Stap 2</span>
</a>

<a href="#" class="descisionTree">
	<img src="https://cdn1.iconfinder.com/data/icons/Isloo_icons_by_IconFinder/128/screen_on.png" />
	<span>Stap 4 <i class="fa fa-check"></i></span>
</a>

<a href="#" class="descisionTree">
	<img src="https://cdn1.iconfinder.com/data/icons/Isloo_icons_by_IconFinder/128/screen_on.png" />
	<span>Stap 3</span>
</a>

<div class="descisionContainer">
	<a href="#" class="descisionBox">
		<i class="fa emptyCheckbox"></i> &nbsp; Materiaal 1
	</a>
	<a href="#" class="descisionBox">
		<i class="fa emptyCheckbox"></i> &nbsp; Materiaal 2
	</a>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}