title: CSS3 Fade Effect
body: <pre><code>a {
      float: left;
      width: 32px;
      height: 32px;
      text-align: left;
      text-indent:-9999px;
      background: url('../img/button.png') no-repeat 0 0;
  
      -webkit-transition: background 300ms ease-in 2s; /* property duration timing-function delay */
      -moz-transition: background 300ms ease-in 2s;
      -o-transition: background 300ms ease-in 2s;
      transition: background 300ms ease-in 2s;
  
  
      -webkit-transition-property: background;
      -webkit-transition-duration: 300ms;
      -webkit-transition-timing-function: ease-in;
      -webkit-transition-delay: 100ms;
  
      -moz-transition-property: background;
      -moz-transition-duration: 300ms;
      -moz-transition-timing-function: ease-in;
      -moz-transition-delay: 100ms;
  
      -o-transition-property: background;
      -o-transition-duration: 300ms;
      -o-transition-timing-function: ease-in;
      -o-transition-delay: 100ms;
  
      transition-property: background;
      transition-duration: 300ms;
      transition-timing-function: ease-in;
      transition-delay: 100ms;
  
  }
  
  a:hover {
      background:position: 0 -32px;
  }
  </code></pre>
  
  <p>.. currently it has scroll up/down effect, but I want the background to change with fade effect, what should I change in the CSS?</p>
  
  <p>Thanks!</p>