CSS 전환 눈금/불투명도 호버 호환성

Question

두 이미지가 나란히 있습니다. 목표는 사용자가 마우스를 가리키면 펼치고 천천히 페이드 인 (div에 포함되는 동안)입니다. 마우스를 가져 가면 마우스를 원래 상태로 되돌릴 수 있습니다.

Firefox에서 잘 작동합니다. Chrome 및 Safari에서 마우스 오버 영역을 떠날 때 불투명도가 1에서 0.4로 완화되는 대신 0.4로 다시 스냅됩니다 (Firefox에서 완벽하게 작동 함). 내가 놓친 게 있니?

편집/참고 : 불투명도는 스케일링 이미지보다 빠르게 사라질 필요가 있습니다. 당신이 당신의 전환에서 두 개의 서로 다른 CSS 속성을 가리키는 것 같은

#img-wrapper { 
    width: 1100px; 
    margin: 0 auto; 
    position: relative; 
    height: 550px; 
} 

.footer-btn a { 
    font-weight: bold; 
    line-height: 63px; 
    text-decoration: none; 
    text-transform: uppercase; 
    color: #fff; 
} 
.footer-btn { 
    position: absolute; 
    z-index: 9000; 
    margin-top: 240px; 
    -moz-box-sizing: border-box; 
    background-color: #000; 
    height: 63px; 
    width: 400px; 
    right: 0; 
    left: 0; 
    margin-right: auto; 
    margin-left: auto; 
} 
.box { 
    width: 550px; 
    height: 550px; 
    text-align: center; 
    overflow: hidden; 
    float: left; 
} 
.box img { 
    width: 556px; 
    height: 556px; 
    padding: 0px; 
    overflow: hidden; 
    position: relative; 

} 
.footer-box { 
    display: table; 
    max-height: 550px; 
    position: absolute; 
    z-index: 9000; 
} 
.footer-box .blog { 
    height: 556px; 
    -webkit-transition: all 10s, opacity 5s; 
    -moz-transition: all 10s, opacity 5s; 
    -o-transition: all 10s, opacity 5s; 
    -ms-transition: all 10s, opacity 5s; 
    transition: all 10s, opacity 5s; 
    opacity: .4; 
} 

.footer-box:hover .blog { 
    cursor: pointer; 
    height:556px; 
    width: 556px; 
    transform:scale(1.15); 
    -ms-transform:scale(1.15); /* IE 9 */ 
    -moz-transform:scale(1.15); /* Firefox */ 
    -webkit-transform:scale(1.15); /* Safari and Chrome */ 
    -o-transform:scale(1.15); /* Opera */ 
    opacity: 0.9; 
} 

    <div id="img-wrapper"> 
     <div class="footer-box"> 
      <div class="box"> 
       <div class="footer-btn"><a class="btn" href=''>Button Text</a></div> 
       <img class="blog" src="images/footer-splash-left.jpg" alt=""> 
      </div> 
     </div> 
     <div class="footer-box" style="right:0px;"> 
      <div class="box"> 
       <div class="footer-btn"><a class="btn" href=''>Button Text</a></div> 
       <img class="blog" src="images/footer-splash-right.jpg" alt=""> 
      </div> 
     </div> 
    </div> 

Answer 1

은 같은데, 그래서 당신은 사업부 내에서 이미지를 포장하는 경우 "모든 10 초"와 "불투명도 5S"

렌더링 브라우저 사이의 충돌이 div에 모든 불투명 스타일을 포함하는 클래스를 지정하면 모든 것이 작동합니다. http://jsfiddle.net/MathiasaurusRex/q3RNS/

<div class="opacityWrapper"> 
<img class="blog" src="http://lorempixel.com/400/200/" alt=""> 
</div> 

.opacityWrapper{ 
    -webkit-transition:opacity 5s; 
    -moz-transition:opacity 5s; 
    -o-transition:opacity 5s; 
    -ms-transition:opacity 5s; 
    transition:opacity 5s; 
    opacity:.3; 
} 

.footer-box:hover .opacityWrapper{opacity:.9;}