Struggling to create an animation that involves two images overlaid on each other – one panning from left to right at the bottom and another image with transparent regions on top, creating a masking effect.
Oddly enough, this animation doesn't display properly when the divs are nested within a container/wrapper div. However, everything works fine when they are placed outside of the predefined div structure. It seems like an issue related to the positioning of the divs...
Any help for this newbie trying to get things back on the right path?
View the jsfiddle: http://jsfiddle.net/hermanlens/BQPK5/
My HTML markup:
<body>
<div id="container">
<div id="pagina">
<div id="menu">
...
</div>
<div id="banner">
<div id="box">
<div id="panning"></div>
</div>
</div>
<div id="inhoud">
This is the content
</div>
</div>
<div id="zijbalk">This is the sidebar</div>
<div id="footer">This is the footer</div>
</div>
<div id="banner">
<div id="box">
<div id="panning"></div>
</div>
</div>
My CSS ...
/* Custom CSS styles */
...