hover hide/show + delay

dabblet.css

/* hover hide/show + delay */
html {display:table;width:100%;height:100%;}
body {display:table-cell;vertical-align:middle;height:100%;}
table {width:80%;margin:0 auto;border-collapse:collapse;}
tbody,tr {width:100%;}
td {width:10%;border:1px solid red;}
img {width:100%;vertical-align:top;opacity:0;transition:5s}
td:hover img {opacity:1;transition:0.25s}

dabblet.html

<table>
<tr><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td>
<td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td></tr>
<tr><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td>
<td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td></tr>
<tr><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td>
<td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td></tr>
<tr><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td>
<td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td></tr>
<tr><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td>
<td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td></tr>
<tr><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td>
<td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td></tr>
<tr><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td>
<td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td></tr>
<tr><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td>
<td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td></tr>
<tr><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td>
<td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td></tr>
<tr><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td>
<td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td><td><img src="http://lorempixel.com/50/50" /></td></tr>

</table>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}