Pure CSS Slider with CSS3 Keyframes

Preview:

Description:

A pure CSS slider component that each new image slides over the previous one with CSS3 animations.

How to use it:

Add a list of images to the slider.

<ul class="slides">
  <li class="first" id="slide-1"><img src="1.jpg"></li>
  <li id="slide-2"><img src="2.jpg"></li>
  <li id="slide-3"><img src="3.jpg"></li>
  <li id="slide-4"><img src="4.jpg"></li>
  <li id="slide-5"><img src="5.jpg"></li>
  <li id="slide-6"><img src="6.jpg"></li>
  <li id="slide-7"><img src="7.jpg"></li>
</ul>

Create a thumbnails navigation for the slider.

<ul class="thumbs">
  <li><a href="#slide-1"><img src="thumb1.jpg"><span>This is image 1</span></a></li>
  <li><a href="#slide-2"><img src="thumb2.jpg"><span>This is image 2</span></a></li>
  <li><a href="#slide-3"><img src="thumb3.jpg"><span>This is image 3</span></a></li>
  <li><a href="#slide-4"><img src="thumb4.jpg"><span>This is image 4</span></a></li>
  <li><a href="#slide-5"><img src="thumb5.jpg"><span>This is image 5</span></a></li>
  <li><a href="#slide-6"><img src="thumb6.jpg"><span>This is image 6</span></a></li>
  <li><a href="#slide-7"><img src="thumb7.jpg"><span>This is image 7</span></a></li>
</ul>

The main CSS styles for the slider.

ul.slides {
  overflow: hidden;
  clear: both;
  border: #333 solid 4px;
}

ul.slides, ul.slides li, ul.slides a, ul.slides img {
  width: 705px;
  height: 350px;
  position: relative;
}

ul.slides li {
  position: absolute;
  z-index: 50;
}

ul.slides li:not(:target) {
  -webkit-animation-name: noTarget;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
}

The CSS styles for the thumbnails navigation.

ul.thumbs li {
  float: left;
  margin-bottom: 10px;
  margin-right: 9px;
}

ul.thumbs a {
  display: block;
  position: relative;
  width: 85px;
  height: 55px;
  border: 4px solid transparent;
  font: bold 12px/25px Arial, sans-serif;
  color: #515151;
  text-decoration: none;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, .25), inset 1px 1px 0px rgba(0,0,0, .15);
}

ul.thumbs img { border: #333 solid 4px; }

ul.thumbs li a:hover span {
  position: absolute;
  z-index: 101;
  bottom: -30px;
  left: -22px;
  display: block;
  width: 100px;
  height: 25px;
  text-align: center;
  border-radius: 3px;
  -webkit-box-shadow: 0px 1px 0px rgba(0,0,0, .4);
  -moz-box-shadow: 0px 1px 0px rgba(0,0,0, .4);
  box-shadow: 0px 1px 0px rgba(0,0,0, .4);
  background: #fff; /* older browsers */
  background: -webkit-linear-gradient(top, #fff, 0%, #bcbcbc, 100%);
  background: -moz-linear-gradient(top, #fff, 0%, #bcbcbc, 100%);
  background: -o-linear-gradient(top, #fff, 0%, #bcbcbc, 100%);
  background: -ms-linear-gradient(top, #fff, 0%, #bcbcbc, 100%);
  background: linear-gradient(top, #fff, 0%, #bcbcbc, 100%);
}

ul.thumbs li a:hover span:before {
  width: 0px;
  height: 0px;
  border-bottom: 5px solid #fff;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  content: '';
  position: absolute;
  top: -5px;
  left: 44px;
}

ul.thumbs li:first-child a:hover span { left: -3px; }

ul.thumbs li:first-child a:hover span:before { left: 25px; }

The CSS3 animation for the slider.

@-webkit-keyframes 'slide' {
 0% {
left: -500px;
}
 100% {
left: 0px;
}
}

ul.slides li:target {
  z-index: 100;
  -webkit-animation-name: slide;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
}

/* not target */

@-webkit-keyframes 'noTarget' {
 0% {
z-index: 75;
}
 100% {
z-index: 75;
}
}