CSS Slideshow without Page Jump

css-slideshow-without-page-jump.css

/**
 * Pure CSS3 Slideshow Without Page Jump by Taufik Nurrohman
 * 26 April 2012
 * http://hompimpaalaihumgambreng.blogspot.com
 */

body {
  background-color:black;
  height:2000px;
  color:#999;
  text-align:center;
  font:normal 12px 'Century Gothic',Arial,Sans-Serif;
}

a {
  color:blue;
  text-decoration:none;
}

h2 {
  margin:30px 0px;
  font-weight:normal;
}

/* General */
#css3-slider {
  margin:20px auto;
  padding:0px 0px;
  width:448px;
  height:286px;
  position:relative;
}

#css3-slider li {
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
}

/* Navigation */
#css3-slider li input + label {
  position:absolute;
  bottom:5px;
  left:10px;
  z-index:999;
  font:bold 11px/16px Arial,Sans-Serif;
  background-color:black;
  color:white;
  padding:0px 0px;
  width:16px;
  text-align:center;
  cursor:pointer;
}

#css3-slider li:nth-child(2) label {left:28px;}
#css3-slider li:nth-child(3) label {left:46px;}
#css3-slider li:nth-child(4) label {left:64px;}
#css3-slider li:nth-child(5) label {left:82px;}

/* Images */
#css3-slider li img {
  border:none;
  outline:none;
  position:absolute;
  top:50%;
  left:50%;
  width:0px;
  height:0px;
  visibility:hidden;
  opacity:0;
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -ms-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
  -webkit-transform:rotate(0deg) scale(0);
  -moz-transform:rotate(0deg) scale(0);
  -ms-transform:rotate(0deg) scale(0);
  -o-transform:rotate(0deg) scale(0);
  transform:rotate(0deg) scale(0);
}

/* Captions */
#css3-slider a {
  text-decoration:none !important;
}

#css3-slider li a span {
  cursor:default;
  display:block;
  position:absolute;
  right:0px;
  bottom:0px;
  left:0px;
  background-color:rgba(0,0,0,0.8);
  font:normal 11px/26px Arial,Sans-Serif;
  color:white;
  padding:0px 10px;
  text-align:right;
  opacity:0;
  viibility:hidden;
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -ms-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
}

/* Active navigation */
#css3-slider li input:checked + label {
  background-color:#39f;
  color:white;
}

/* Show the image with transition */
#css3-slider li input:checked ~ img,
#css3-slider li input:checked ~ a img {
  top:0%;
  left:0%;
  width:448px;
  height:286px;
  visibility:visible;
  -webkit-transform:rotate(720deg) scale(1);
  -moz-transform:rotate(720deg) scale(1);
  -ms-transform:rotate(720deg) scale(1);
  -o-transform:rotate(720deg) scale(1);
  transform:rotate(720deg) scale(1);
  opacity:1;
  z-index:99;
}

/* Show the caption with fade effect */
#css3-slider li input:checked ~ a span {
  opacity:1;
  z-index:100;
}

/* Hide the radio */
#css3-slider input {
  display:none;
}

css-slideshow-without-page-jump.html

<h2>Pure CSS3 Slideshow Without Page Jump</h2>
<ul id="css3-slider">
	<li>
		<input type="radio" id="s1" name="num" checked="true" />
		<label for="s1">1</label>
		<a href="javascript:void(0);">
			<img src="http://cssdeck.com/uploads/media/items/0/0UeVZv3.jpg" />
			<span>Why do you put the egg yolks on your eyes?</span>
		</a>
	</li>
	<li>
		<input type="radio" id="s2" name="num" />
		<label for="s2">2</label>
		<a href="javascript:void(0);">
			<img src="http://cssdeck.com/uploads/media/items/9/9J2jvF6.jpg" />
			<span>How can you look ahead if your eyes are on the side?</span>
		</a>
	</li>
	<li>
		<input type="radio" id="s3" name="num" />
		<label for="s3">3</label>
		<a href="javascript:void(0);">
			<img src="http://cssdeck.com/uploads/media/items/0/0ckDaQF.jpg" />
			<span>Keep praying to God</span>
		</a>
	</li>
	<li>
		<input type="radio" id="s4" name="num" />
		<label for="s4">4</label>
		<a href="javascript:void(0);">
			<img src="http://cssdeck.com/uploads/media/items/3/3oMnVPz.jpg" />
			<span>Stay relaxed</span>
		</a>
	</li>
	<li>
		<input type="radio" id="s5" name="num" />
		<label for="s5">5</label>
		<a href="javascript:void(0);">
			<img src="http://cssdeck.com/uploads/media/items/1/1hZPTaR.jpg" />
			<span>And you will forever be relaxed</span>
		</a>
	</li>
</ul>

<footer>Images from anywhere</footer>