Overlay a background-image with an rgba color, with a CSS3 transition

Question

Earlier today I asked Overlay a background-image with an rgba background-color. My goal is to have a div with a background-image, and when someone hovers the div, the background

Answer 1

Allthough @Ana technique is also nice, and works fine, allow me to slightly alter my answer to the previous question, and add the transition in that code. http://jsfiddle.net/Pevara/N2U6B/2/

#the-div {
    width: 500px;
    height: 500px;
    background: url(http://placekitten.com/500/500) no-repeat center center;
    position: relative;
}

#the-div:after {
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0);
    transition: background-color .5s;
}
#the-div:hover:after {
    background-color: rgba(0,0,0,.5);   
}

What I did is i defined the :after pseudo element on the default state of the div in stead of only on the hover state, but with a fully transparent background, and a transition on the background color. On hover of the div, I change the background color of the pseudo element to be less transparent. Thanks to the transition it fades in nicely.

The technique is basicly the same as what @Ana did, but perhaps a bit more intuitive because I don't use the background-color: inherit;. Also if the div would becomes bigger then the background image, you would not get the 'double darkness' on the edges, as demonstrated here http://codepen.io/anon/pen/cjoHr versus here http://jsfiddle.net/Pevara/N2U6B/3/