JS-less slideshow

by asdf

HTML

<ul class="slideshow">
  <li id="slide-1">
    <h1>Image description goes here. -1</h1>
    <img src="images/0.png" alt="" />
    <a href="#slide-5">Previous</a>
    <a href="#slide-2">Next</a>
  </li>
  <li id="slide-2">
    <h1>Image description goes here. -2</h1>
    <img src="images/0.png" alt="" />
    <a href="#slide-1">Previous</a>
    <a href="#slide-3">Next</a>
  </li>
  <li id="slide-3">
    <h1>Image description goes here. -3</h1>
    <img src="images/0.png" alt="" />
    <a href="#slide-2">Previous</a>
    <a href="#slide-4">Next</a>
  </li>
  <li id="slide-4">
    <h1>Image description goes here. -4</h1>
    <img src="images/0.png" alt="" />
    <a href="#slide-3">Previous</a>
    <a href="#slide-5">Next</a>
  </li>
  <li id="slide-5">
    <h1>Image description goes here. -5</h1>
    <img src="images/0.png" alt="" />
    <a href="#slide-4">Previous</a>
    <a href="#slide-1">Next</a>
  </li>
</ul>

CSS

.slideshow {
  list-style-type: none;
}

.slideshow li {
  position: absolute;
  width: 200px;
  height: 200px;
  z-index: 0;
  background: white;
}

.slideshow li:target {
  z-index: 1;
}

.slideshow h1 {
  font-size: 1.4em;
}

.slideshow img {
  width: 100%;
  height: 100%;
}