Skrollr: fading image jumping to top of z-index

I have some images scrolling normally with some overlaying div’s creating a mask effect.
It works fine but I want to fade-in the scrolling images. As soon as i add the opacity animation the fading image jumps to the top of the z-index stack until it hits opacity:1 & then it jumps back to its normal z-index.
Here is the page in question.

The 3 triangle shapes masking the images belong to the fixed positioned nav column which is outside #skrollr-body (as recommended)

<div class="tri6"></div>
<div class="tri7"></div>
<div class="tri8"></div>

& they are positioned over the right column where the scrolling images are.

<div class="page_photo" data-400="opacity: 0;" data-700="opacity: 1;">
<img src="photos/fight1.jpg">
<img src="photos/neutron4.jpg">
<img src="photos/indi.jpg">
<img src="photos/taxi.jpg">
<img src="photos/planet1.jpg">
</div>

I set the z-index of the image to -1 & the mask div’s to 500, but that is not the solution. Not sure how to proceed – any advice?

to clarify: visit the linked site, scroll down. you will see a large image of a guy fighting. As that image scrolls 3 white triangles will appear. They should always be on top & not behind the animating opacity effect.


Source: css

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.