switch image & transition

dabblet.css

/* switch image & transition */
ul {border:solid;width:500px;padding:0;overflow:hidden;;margin:1em auto;text-align:center;background:#555;position:relative;}
li:nth-child(1),li:nth-child(2) {float:left;} 
li:nth-child(2) {clear:left;;}
li:nth-child(3), li:nth-child(4) {float:right;clear:right;}
li:nth-child(3) {margin-top:-80px}
li:nth-child(5) {position:absolute;top:40px;left : 175px;}
li, li a , img {display:inline-block;height:80px;vertical-align:top;width:150px;overflow:hidden;margin:0 0 0 0;transition:2s;line-height:80px;}
li:nth-child(odd) {white-space:nowrap;}
li:nth-child(odd) a:link  img + img,
li:nth-child(3) a:link img + img,
li:nth-child(5)  a:link img {margin:0 0 0 0;opacity:1;}
li:nth-child(odd) a:hover img ,
li:nth-child(3)  a img {margin:0 0 0 -150px;}
li:nth-child(even) a:hover img {margin:-80px 0  0;}
li:nth-child(4) a img  {margin:-80px 0  0;}
li:nth-child(4)  a:hover img,
li:nth-child(3)  a:hover img {margin:0 0 0 0 ;}
li:nth-child(5)  a:link img {margin:0 0 0 0;position:absolute;left:0;}
li:nth-child(5)  a:hover img + img {margin:0 0 0 0;opacity:0;position:absolute;z-index:1;}

dabblet.html

<ul>
	<li><a href="#" title="people 1"><img src="http://lorempixel.com/150/80/people/1/people" /><img src="http://lorempixel.com/150/80/people/2/people" /></a></li>
	<li><a href="#" title="people 3"><img src="http://lorempixel.com/150/80/people/3/people" /><img src="http://lorempixel.com/150/80/people/4/people" /></a></li>
	<li><a href="#" title="people 5"><img src="http://lorempixel.com/150/80/people/5/people" /><img src="http://lorempixel.com/150/80/people/6/people" /></a></li>
	<li><a href="#" title="people 7"><img src="http://lorempixel.com/150/80/people/7/people" /><img src="http://lorempixel.com/150/80/people/8/people" /></a></li>
	<li><a href="#" title="people 9"><img src="http://lorempixel.com/150/80/people/9/people" /><img src="http://lorempixel.com/150/80/people/10/people" /></a></li>	
</ul>

dabblet.js

// alert('Hello world!');

settings.json

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