CSS3 - 배경 이미지로 교차 페이드 이미지

Question

이 육각형의 각각의 배경 이미지를 다른 그림 (예 : http://css3.bradshawenterprises.com/cfimg/)으로 교차 페이드로 만들 수 있습니까?

저는 CSS에 비교적 익숙하지 않습니다. 그래서 여기에 도달 할 수 없다고 생각합니다. 그래서 여기 Stackoverflow의 위대한 커뮤니티에 도움을 청하러 왔습니다.

http://jsfiddle.net/kGSCA/128/

<div class="container"> 

     <div class="hex" style="background-image: url(http://css3.bradshawenterprises.com/images/Turtle.jpg);">  
     <a href="#"></a>   
     <div class="corner-1"></div> 
     <div class="corner-2"></div>   
    </div> 

      <div class="hex" style="background-image: url(http://css3.bradshawenterprises.com/images/Turtle.jpg);">  
     <a href="#"></a>   
     <div class="corner-1"></div> 
     <div class="corner-2"></div>   
    </div>  

감사합니다!

• 존

Answer 1

그냥 인라인 스타일에서 배경 이미지를 제거하고 CSS에 넣어.

.hex { 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 
    background-image: url(http://css3.bradshawenterprises.com/images/Turtle.jpg); 
} 
.hex:hover { 
    background-image: url(http://placekitten.com/450/300); 
} 

당신의 HTML은 이러한 방법으로 남아있다 : ​​

<div class="hex">  
    <a href="#"></a>   
    <div class="corner-1"></div> 
    <div class="corner-2"></div>   
</div> 

서로 다른 이미지를 원하는 경우 결과

fiddle

물론이, 당신이에 ID를 설정해야합니다 참조 요소를 만들고 이에 따라 이미지를 할당하십시오.