圖像受到另一個圖像不透明度轉換的影響

Question

在下面的代碼中，存在不透明度轉換，它允許一個圖像淡出並顯示其背後的圖像。疊加這兩個圖像是一個徽標圖像，旨在保持全過程的全視圖，但在轉換過程中閃爍。 （在Chrome和Firefox測試 - 看到兩個）

我怎樣才能保持不斷地在上面，在完全不透明的標誌，同時還具有潛在的圖像褪色的工作？

請參閱在底部的jsfiddle鏈接工作的例子。

的HTML

<div> 

    <img id="bloomtop" 
    src="http://dev.kaizenauto.co/images/colorbloom.jpg"> 

    <img id="bloombottom" 
     src="http://dev.kaizenauto.co/images/greybloom.jpg"> 

    <img class="img-responsive z99" 
     src="http://dev.kaizenauto.co/images/drivenow.png"> 

</div> 

的CSS

.z99 { 
    z-index:99; 
} 

#bloomtop, 
#bloombottom { 
    width:100%; 
    height:290px; 
    margin-bottom:-290px; 
    display:block; 
    transition: opacity .7s ease-in-out; 
    z-index:1; 
} 


#bloombottom:hover { 
    opacity:0; 
} 

所有這一切都在小提琴的動作：http://jsfiddle.net/ax3dwbyo/2/

感謝。

Answer 1

只需添加position: relative您.z99 DIV，像這樣：

.z99 { 
    position: relative; 
} 

這裏的工作演示：

.z99 { 
 
\t z-index:99; 
 
    position:relative; 
 
} 
 

 
#bloomtop, 
 
#bloombottom { 
 
\t width:100%; 
 
\t height:290px; 
 
\t margin-bottom:-290px; 
 
\t display:block; 
 
\t transition: opacity .7s ease-in-out; 
 
\t z-index:1; 
 
} 
 

 

 
#bloombottom:hover { 
 
    opacity:0; 
 
}

<div> 
 
    <img src="http://dev.kaizenauto.co/images/colorbloom.jpg" id="bloomtop"> 
 
    <img src="http://dev.kaizenauto.co/images/greybloom.jpg" id="bloombottom"> 
 
    <img src="http://dev.kaizenauto.co/images/drivenow.png" class="img-responsive z99"> 
 
</div>

jsFiddle。