title: How to fade in background image by CSS3 Animation
body: <p>I am making a menu that each item has a text like item1, item2 and etc.  in hover the background colour changes, text becomes transparent and a background image replaces. I used this code to ease in and out the style. but it only works for background colour and not the image.</p>
  
  <pre><code>#nav li:hover {
      color:transparent !important;
      text-shadow: none;
      background-color: rgba(255, 0, 0, .5);
  
      -webkit-transition: all 1s ease-in;
      -moz-transition: all 1s ease-in;
      -o-transition: all 1s ease-in;
      -ms-transition: all 1s ease-in;
      transition: all 1s ease-in;
  }
  </code></pre>
  
  <p>Here is the online version:
  <a href="http://jsfiddle.net/q4uHz/" rel="noreferrer">http://jsfiddle.net/q4uHz/</a></p>