배경색이 배경 이미지로 변환됩니다.

Question

안녕하세요, 배경색을 지정하고 마우스를 올리면 이미지로 전환됩니다. 나는 아주 좋은 예제를 발견했지만 다른 방법은 여기 링크가 있습니다. http://jsfiddle.net/davidThomas/PbvFr/1/ 그래서 bg 블랙이 필요합니다. hover 이미지가 시간이 지남에 따라 나타납니다. 나는이 일을 시도했지만 불행히도 전환이 원활하지 않습니다. 시간 내 주셔서 감사합니다!!!!!!!! 여기

.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

그냥 그가 무슨 짓을했는지 역 : http://jsfiddle.net/PbvFr/102/

변경 불투명도 0에서 0

1이 아닌 1

Look the CSS 

Answer 2

당신이가는 : 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; 
}