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.

Image Overlays in reveal.js

Update notice: I've noticed this page is getting a few hits, so I've done an update with an alternate technique that I've used in preference to the one below, which had some issues with scaling at different resolutions.

reveals.js is a fantastic little library for creating web-based presentations.

While putting a presentation together I was trying to work out how to quickly throw up images as overlays over the presentation text at the start of a slide, and then disappear to reveal the text.

With the help of a colleague^†, we worked out a couple of techniques you can apply using the reveal.js "fragment" and "current-visible" option combined with an absolute position.

Option 1 simply overlays the image and has it disappear as the next action in the presentation:

<img class="fragment current-visible" src="image.jpg"
style="position:absolute; left:210px; top:100px;"/>

For Option 2, I added a link so you can get the full-sized image if you want:

<p class="fragment current-visible"
style="position:absolute; left:120px; top:100px;">
<a href="image.jpg"><img src="image.jpg" width="1024"/></a></p>

The way reveal.js scales a presentation to a nominated size in the configuration means the absolute positioning isn't as bad to work in as it would be in a "normal" web page, you only have to get the position right once for the desired image width and it will work due to the scaling factor. It may not be the most elegant way, but it works pretty well.

_{† Okay, let's be honest, my colleague worked it all out, I just watched. Thanks GD!}