How is the black and white to color tansition being accomplished

Question

Hi All, I'm trying to find out how, when hovered over, the photos show their true colours instead of being black and white on this 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!

Answer 1

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)));

Answer 2

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"/&gt;
</a>