Image Stacking in reveal.js

A while back I posted on image overlays in reveal.js. That technique seemed promising but has a problem in practice as it messed with the scaling at different resolutions.

A technique that I ended up using was to split an image section off to one side rather than overlay it on top of the text, with a link to the image original so that you could fullscreen it if desired. Multiple images can be stacked on top of one another by offsetting to top left coords.

Here's a snippet of the code:

<section id="slide-1">

  <h2>Slide Heading</h2>

  <div class="image-float">
    <p style="position: relative; left: 0; top: 0;">
        <a href="image1.jpg"><img src="image1.jpg" height="700vh"/></a></p>
    <p class="fragment" data-fragment-index="2" style="position:absolute; left:20px; top:20px;">
        <a href="image2.jpg"><img src="image2.jpg" height="700vh"/></a></p>
    <p class="fragment" data-fragment-index="4" style="position:absolute; left:40px; top:40px;">
        <a href="image3.jpg"><img src="image3.jpg" height="700vh"/></a></p>
  </div>

  <div class="content-aside">
    <p class="fragment fade-down" data-fragment-index="1">Text 1</p>
    <p class="fragment" data-fragment-index="1">Text 2</p>
    <p class="fragment" data-fragment-index="3">Text 3 (after image 2)</p>
    <p class="fragment" data-fragment-index="5">Text 4 (after image 3)</p>
  </div>
</section>

And the css for the custom classes:

.image-float {
   float: left;
   position: relative;
   top: 0;
   left: 0;
}

.reveal .content-aside {
   margin-top: 1em;
}

This technique was okay, but still not perfect, as the stacked images to offset on the left side but scaled so the right hand side sat flush on each one...something for another day.