title: Overlay a background-image with an rgba color, with a CSS3 transition
body: <p>Earlier today I asked <a href="https://stackoverflow.com/q/17134929/1544337">Overlay a background-image with an rgba background-color</a>. My goal is to have a div with a background-image, and when someone hovers the div, the background-image gets overlayed with an rgba color. In <a href="https://stackoverflow.com/a/17134984/1544337">the answer</a>, a solution with <code>:after</code> was given:</p>
  
  <pre class="lang-css prettyprint-override"><code>#the-div {
      background-image: url('some-url');
  }
  
  #the-div:hover:after {
      content: ' ';
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: rgba(0,0,0,.5);
  }
  </code></pre>
  
  <p>I now would like to have the same, but with a CSS transition: I'd like the background color to fade in. I tried adding <code>transition: all 1s;</code> to the <code>#the-div</code> CSS, but that didn't work. I also try to add it to <code>#the-div:hover</code> and <code>#the-div:after</code>, but that didn't work either.</p>
  
  <p>Is there a pure CSS way to add a fading in overlay to a div with a background-image?</p>