¿Cómo es el blanco y negro de transición de color están cumpliendo

Question

Estoy tratando de averiguar cómo, cuando se cernía sobre, las fotos muestran sus verdaderos colores en lugar de ser en blanco y negro en este sitio: http://2010.dconstruct.org/ . Creo que no es una simple cuestión de tener dos versiones de la imagen, pero realmente no estoy seguro.

te agradecería cualquier ayuda con ella!

Answer 1

En realidad, se hace uso de dos versiones de la imagen, incluso sin mirar el código, se puede ver por la diferencia de contraste algunos de ellos tienen entre versiones de peso corporal / color. De todas formas, cada anclaje tiene el mismo url("../../i/speakers/sprite.jpg") asignado imagen backgroud cuyos diferentes determina que se muestra retrato posición vertical. Esta imagen de sprite está en b / w.

Cada anclaje contiene un elemento de imagen (la versión a color) con una opacidad inicialmente establecido en 0, entonces se establece en 100% el ratón por encima.

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

Answer 2

Se utiliza esta opción para lograr la transición:

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