How is the black and white to color tansition being accomplished

I'm trying to find out how, when hovered over, the photos show their true colours instead of being black and white on this 开发者_C百科site: http://2010.dconstruct.org/ . I don't think it's a simple matter of having two versions of the image, but I'm really not sure.

I'd appreciate any help with it!

It uses this option to achieve transition:

background: -webkit-gradient(linear, 0% 0%, 0% 100%, 
     from(transparent), color-stop(0.7, transparent), 
     to(rgba(0, 22, 9, 0.496094)));

Actually, it does use two versions of the image, even without looking at the code, you can tell by the difference in contrast some of them have between bw/colour versions. Anyways, each anchor has the same backgroud image assigned url("../../i/speakers/sprite.jpg") whose different vertical position determines which portrait is shown. This sprite image is in b/w.

Each anchor contains an image element (the colored version) with an opacity initially set to 0, then set to 100% on mouse over.

<a class="tile bridle" href="/speakers/james-bridle">
 <p>
  <span>
   James
   <b>Bridle</b>
  </span>
 </p>
 <img alt="" src="http://media02.dconstruct.org/2010-0008/i/speakers/bridle.jpg?0008"/>
</a>