Background colored div transition to background image - css

Question

Hi what I am trying to do is have a with background color and on hover it will transition to a image. I found very good example but other way around here is a link.
http://jsfiddle.net/davidThomas/PbvFr/1/ so I need bg black and on :hover image will appear over time. I tried to do this but unfortunately the transition is not smooth. thank you for your time!!!!!!!!
.imageWrap {
background-color: #333;
border: 1px solid #000;
height: 300px;
moz-transition: all 1s linear;
ms-transition: all 1s linear;
o-transition: all 1s linear;
transition: all 1s linear;
webkit-transition: all 1s linear;
width: 300px;
}
.imageWrap .img {
moz-transition: all 1s linear;
ms-transition: all 1s linear;
opacity: 1;
o-transition: all 1s linear;
transition: all 1s linear;
webkit-transition: all 1s linear;
}
.imageWrap:hover {
background-image: url(5.jpg);
moz-transition: all 1s linear;
ms-transition: all 1s linear;
o-transition: all 1s linear;
transition: all 1s linear;
webkit-transition: all 1s linear;
}
.img:hover, .imageWrap:hover .img {
moz-transition: all 1s linear;
ms-transition: all 1s linear;
opacity: 0;
o-transition: all 1s linear;
transition: all 1s linear;
webkit-transition: all 1s linear;
}

Answer 1

Just reverse what he did: http://jsfiddle.net/PbvFr/102/
Change opacity from 0 to 1 rather than 1 to 0.
Look the CSS

Answer 2

Here you go: FIDDLE
CSS
.imgWrap {
display: inline-block;
position:relative;
border: 1px solid #000;
background-color: #000;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
height: 500px;
width:364px;
}
.imgWrap img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
background: #fff;
color: #fff;
opacity:0;
transition:1s;
}
.imgWrap:hover img {
opacity: 1;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}