title: Fading one image out while another in using CSS transitions on opacity isn't smooth?
body: <p>I placed two images on top of one another (one in black and white and the other in color) and created a CSS transition wherein the opacity of one image decreases while the other increases. The result is a <a href="http://jsfiddle.net/orvn/qvcRf/3/" rel="nofollow">color on hover effect</a>.</p>
  
  <p>I'm having an issue though: at some point during the transition you can see through the image a little, indicating that the transition of opacity isn't linear even though the "transition-timing-function" property is set to linear.</p>
  
  <p>If there was some kind of quadratic easing involved I'd understand why this is happening, but there shouldn't be?</p>
  
  <p>(the reason I'm approaching this with pure CSS is because I haven't fully tackled JQuery yet)</p>
  
  <p>Any ideas on how I can better implement this functionality?</p>
  
  <p>My CSS is below, or <a href="http://jsfiddle.net/orvn/qvcRf/3/" rel="nofollow">visit this JSFiddle</a>.</p>
  
  <pre><code>#container { width: 210px; height: 150px; display:block; border: 4px solid #ccc; position:relative; overflow:hidden; margin: 10px 0 0 10px;}
  
  .image { width: 210px; height: 150px; display:block; position:absolute; left: 0px; top:0px; }
  
  #dbw { 
      transition: all 0.3s linear;
      -webkit-transition: all 0.3s linear;
      moz-transition: all 0.3s linear;
      -o-transition: all 0.3s linear;
      background: url("http://oi42.tinypic.com/x0y2ky.jpg"); 
      zoom: 1;
      filter: alpha(opacity=100);
      opacity: 1;
  }
  
  #dco { 
      transition: all 0.3s linear;
      -webkit-transition: all 0.3s linear;
      moz-transition: all 0.3s linear;
      -o-transition: all 0.3s linear;
      background: url("http://oi40.tinypic.com/28gwcrb.jpg"); 
      zoom: 1;
      filter: alpha(opacity=0);
      opacity: 0;
  }
  
  #container:hover #dbw { 
      filter: alpha(opacity=0); 
      opacity: 0; 
      transform: scale(1.1);
      -ms-transform: scale(1.1); 
      -webkit-transform: scale(1.1);
  }
  
  #container:hover #dco { 
      filter: alpha(opacity=100); 
      opacity: 1; 
      transform: scale(1.1);
      -ms-transform: scale(1.1); 
      -webkit-transform: scale(1.1);
  }
  </code></pre>