图像受到另一个图像不透明度转换的影响

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。