title: CSS Transitions Not Working?
body: <p>What I'm trying to do here is get a transition when this div is hovered over.</p>
  
  <p>Everything works fine, its just the transition that does nothing. I've tried using the transition properties with <code>transition: all</code>, <code>transition: opacity</code> and <code>transition: background</code>. But none of them work.</p>
  
  <p>It's the <code>display</code> property that's doing it. Because when I take that out, it works. How else can I get around this? Because I obviously want to keep the <code>display</code> property, as it works on all browsers, young and old.</p>
  
  <p>Here's what I've got at the moment:</p>
  
  <pre><code>.matrix-overlay {
      position: absolute;
      width: 100%;
      height: 100%;
      background: rgb(0,0,0); /* fallback */
      background: rgba(0,0,0,0);
      color: #fff;
      display: none;
      -webkit-transition: background 2s;
      -o-transition: background 2s;
      -moz-transition: background 2s;
      transition: background 2s;
  }
  
  a:hover .matrix-overlay {
      display: block;
      background: rgba(0,0,0,0.5);
  }
  </code></pre>
  
  <p>I don't mind if I'm using opacity or background or whatever to control the fading, I just don't know what else to do.</p>