title: Trying to get images to overlap entirely, while fading in, in turn
body: <p>I'm strictly limited to using YUI/Javascript along with HTML and possibly CSS as long as it runs with IE.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="test" style="visibility:hidden"&gt;
  
                      &lt;p&gt;&lt;img src=../../included_files/VGirlMega.png&gt;&lt;/p&gt;
                      &lt;p&gt;&lt;img src=../../included_files/ReVGirlMega.png&gt;&lt;/p&gt;
  
  &lt;/div&gt;
  
  &lt;script src="../../included_files/myjs.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>window.onload=(function(cback){
      return function(ev){
          cback &amp;&amp; cback.call(window,ev);
          YUI().use('transition',function(Y){
  
              var cntr=1; //seconds
              Y.all('#test p').setStyles({'opacity':0,
                                          'marginTop':'25px',
                                          'background':'none repeat scroll 0 0 #fff',
                                          'fontSize':'21px'}).each(function(nd){
  
                  nd.transition({
                      easing: 'ease-out', //easing method
                      duration: 9, // seconds
                      delay:cntr, //this is our counter to stagger the p tags showing
                      opacity:1 
                  });
  
                  cntr+=14.0; //increase the delay by half a second
              });
  
              Y.one('#test').setStyle('visibility','visible');
          });
      }
  })(window.onload);
  </code></pre>
  
  <p>As you can see, I had someone help me with the Javascript, because I'm using it in an E-Learning Authoring Tool, which is quite specific over what works and what doesn't. As it stands of course, the images currently load one below the other. I'm thinking that I may be done over simply because of the paragraph tags?</p>
  
  <p>I've looked into how others have achieved this, but while they're usually going for the same concept, the implementation isn't near the same and requires a lot more css/java.</p>
  
  <p>For example this fiddle: <a href="http://jsfiddle.net/k9e5f/2/" rel="nofollow noreferrer">http://jsfiddle.net/k9e5f/2/</a>
  Found in this thread: <a href="https://stackoverflow.com/questions/13923384/jquery-overlapping-images-during-transition-trying-to-make-background-transitio">jQuery overlapping images during transition (trying to make background transition)</a></p>
  
  <p>Would it be difficult to adapt what I have, without basically starting over? </p>
  
  <p>p.s. Jquery isn't an option for this :(</p>
  
  <p>Thanks for any help.</p>