Animacion sprite CSS3

[dooplanillo]

Buenas a todos, estoy intentando hacer una animación como la de la página:
http://www.8020studio.com
Pero no doy exactamente con la clave, de hecho se anima la parte del título (que pasa del gris original a uno algo más oscuro) pero no consigo que se anime el sprite de la imagen en b&N a color. Creo que solo utiliza CSS, este sería el código:

HTML:

Código:

<ul id="work-list">
     <li id="work-list-skype">
        <a href="#skype" linkindex="3">
        <span class="project-name">Skype</span>
        <span class="poject-extra"></span>
        </a>
      </li>
</ul>

CSS:

Código:

a:link, a:visited {

	text-decoration: none;
	-webkit-transition: color 0.2s ease-in-out;
	-moz-transition: color 0.2s ease-in-out;
	-o-transition: color 0.2s ease-in-out;
	transition: color 0.2s ease-in-out;
}




/* --------------------------------------------------------------------------
	=work list
--------------------------------------------------------------------------- */

#work-list {
	height: 1007px;
	list-style: none;
	line-height: 0;
	margin: 30px auto 0;
	position: relative;
	text-align: left;
	width: 915px;
}

#work-list li {
	position: absolute;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

#work-list-skype {
	left: 0;
	top: 0;
}

#work-list a {
	color: #fff;
	display: block;
	font: 12px/13px 'myriad-pro-1', 'myriad-pro-2', Helvetica, Arial, sans-serif;
	font-weight: 100;
	height: 233px;
	text-decoration: none;
	text-transform: uppercase;
	position: relative;
	width: 295px;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
#work-list-skype, #work-list-skype a {
	background: #444750 url(../images/borrar/proj-thumb-skype.jpg) no-repeat 0 0;
}

#work-list a:hover {
	background-color: #323437;
}

#work-list-skype a,
#work-list-sony a,
#work-list-voda360web a {
	height: 511px;
}

#work-list span.project-name {
	bottom: 0;
	display: block;
	left: 0;
	line-height: 20px;
	padding: 0 0 15px 20px;
	position: absolute;
	width: 275px;
}

#work-list span.project-extra {
	display: block;
	height: 184px;
	left: 0;
	position: absolute;
	top: 0;
	width: 295px;
}

#work-list-skype span.project-extra,
#work-list-sony span.project-extra,
#work-list-voda360web span.project-extra {
	height: 462px;
}

#work-list li a span.project-extra {
	opacity: 0;
	z-index: 20;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

#work-list a:hover span.project-extra {
	opacity: 1;
}


#work-list-skype a span.project-extra, #work-list-skype a:hover span.project-extra {
	background: url(../images/borrar/proj-thumb-skype.jpg) no-repeat scroll -295px 0 transparent;
}

Alguna idea de por qué la imagen no se anima y el fondo del titulo si?

Muchas gracias a todos de antemano.