HTML and CSS Slideshow

This slideshow uses the :hover pseudo-class to show only the selected slide, an inspiration from Eric Meyer's Pure CSS Menus. Unfortunately, it will not work on Internet Explorer, because of its low level of CSS support.

No JavaScript is used in the slideshow. Just easy to modify, hand coded HTML and CSS.

You may want to open another window/tab to view this slideshow in its full glory. You can use view-source on that page to see everything presented below put together.

The HTML

<ol>
  <li>
    <span>Short slide description</span>
    <div>
      <h1>Longer Slide Title</h1>
      <p>Slide Text
    </div>
</ol>

I chose to use an <ol> because this is the closest semantic match I could think of.

The contents of the div can be any HTML.

Core CSS

body { margin: 0; padding: 0; width: 6em; }

body > ol { margin: 0; padding: 0 }

body > ol > li { display: block; }

body > ol > li > span { display: block; }

body > ol > li > div {
  display: none;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 3em;
  font-size: 2em;
}

body > ol > li:hover > div { display: block; }

List Styling

body { margin: 0; padding: 0; width: 6em; }

Eliminate the margin or padding on the body element, and force it to be only 6em wide, so the floats will flow in a column.

body > ol { margin: 0; padding: 0 }

Eliminate the margin and padding on the ol, its not being used that way.

body > ol > li { display: block; }

Use display: block to eliminate the list marker.

Slide Styling

body > ol > li > span { display: block; }

Make the descriptions a block so borders align.

body > ol > li > div {
  display: none;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 3em;
  font-size: 2em;
}

Hide the slide contents, and have them fill the viewport.

Bump the font-size up for easy reading.

The left offset needs to be 3em, because the font-size is twice as big as the bodies (6/2 = 3).

Showing and Hiding Slides

body > ol > li:hover > div { display: block; }

When the li is hovered, display the div's contents, so you can actually read the slide. So long as the cursor stays on the slide, the contents won't disappear.

Implementation Notes

No classes or ids were used to make it easy for slideshow authors to define their own styles.

Semantic structure makes the slideshow search engine friendly.

The same structure can also be easily printed (try print-preview) or changed to a single-page view.

Extending the Slideshow

Add a background to give the slideshow a bit more style.

Add a header before the ordered list or a footer after the ordered list and adjust the positioning to give the slideshow a consistent look across all slides.

Use data: URIs to store images or alternate stylesheets in the same file as the slideshow. You can create them with datafy.rb.