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.
Ok, I think I got it. The problem is that the triangle's container does not have the z-index applied.
Try changing the style of col1 div to this:
.col1 {
float: left;
width: 20%;
min-width: 12em;
padding-top: 1em;
position: relative;
z-index: 9999;
}
Let me know if that does the trick.