Wie wird die Schwarz-Weiß-Farbübergang wird erreicht

Question

Ich versuche, herauszufinden, wie, wenn schwebte über, die Fotos zeigen ihre wahren Farben statt auf dieser Seite schwarz und weiß zu sein: http://2010.dconstruct.org/ . Ich glaube nicht, es ist einfach eine Frage der zwei Versionen des Bildes zu haben, aber ich bin wirklich nicht sicher.

ich Hilfe mit ihm schätzen würde!

Answer 1

Eigentlich ist es nicht verwendet zwei Versionen des Bildes, auch ohne Blick auf den Code, können Sie durch den Unterschied im Gegensatz sagen einige von ihnen zwischen bw / Farbvarianten haben. Wie auch immer, ist jeder Anker das gleiche backgroud Bild zugeordnet url("../../i/speakers/sprite.jpg") deren unterschiedliche vertikale Position bestimmt, welches Portrait angezeigt wird. Dieses Sprite-Bild ist in s / w.

Jeder Dübel enthält ein Bildelement (die farbige Version) mit einer Opazität zunächst auf 0 gesetzt, dann auf 100% auf Maus-Set über.

<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

Es nutzt diese Option Übergang zu erreichen:

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