HTML5 eMetro

dabblet.css

/* HTML5 eMetro */

html {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
color: #fff;
font-size: 18pt;
font-family: "Cabin", sans-serif;
min-height: 100%;
}
body a {
color: #fff;
text-decoration: none;
}
ul.eMetro img.cover:hover {
opacity: 0;
-webkit-transition: opacity 0.25s;
-moz-transition: opacity 0.25s;
-o-transition: opacity 0.25s;
-ms-transition: opacity 0.25s;
transition: opacity 0.25s;
}
ul.eMetro img.cover {
position: absolute;
z-index: 2;
opacity: 1;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
transition: opacity 0.5s;




}
ul.eMetro a {
display: block;
width: 280px;
height: 136px;
}
ul.eMetro a.c1 {
background: #00AF67;
}
ul.eMetro a.c2 {
background: #E54091;
}
ul.eMetro a.c3 {
background: #FF8037;
}
ul.eMetro span {
color: #fff;
font-size: 12pt;
position: absolute;
margin: 110px 10px;
z-index: 1;
}
ul.eMetro img.icon {
margin: 10px 90px;
z-index: 1;
position: absolute;
}
ul.eMetro {
list-style: none;
background: #000;
width: 862px;
padding: 6px 6px 0 6px;
}
ul.eMetro li {
display: inline-block;
padding: 2px;
}

dabblet.html

HTML5 Transitions at work...

<ul class="eMetro">
<li>
<a href="http://www.eriklindemann.com/eMetro/images/full/naptime.jpg" class="c1">
	<span>Naptime Kittens!</span>
	<img class="icon" src="http://eriklindemann.com/images/cat-icon.png" />
	<img class="cover" src="http://www.eriklindemann.com/eMetro/images/thumb/naptime.png" />
</a>
</li>
<li>
<a href="http://www.eriklindemann.com/eMetro/images/full/help.jpg" class="c2">
	<span>Help Me!</span>
	<img class="icon" src="http://eriklindemann.com/images/cat-icon.png" />
	<img class="cover" src="http://www.eriklindemann.com/eMetro/images/thumb/help.png" />
</a>
</li>
<li>
<a href="http://www.eriklindemann.com/eMetro/images/full/cat-engine.jpg" class="c3">
	<span>Cat Powered!</span>
	<img class="icon" src="http://eriklindemann.com/images/cat-icon.png" />
	<img class="cover" src="http://www.eriklindemann.com/eMetro/images/thumb/cat-engine.png" />
</a>
</li>
</ul>

settings.json

{"view":"separate","seethrough":"","prefixfree":"1","page":"all"}