ステージ下部に配置されたサムネイルをクリックすると、メイン画面に写真が右からスライド・インして表示されるタイプのフォトギャラリーであり、css の transition プロパティーを使った例である。サムネイル用の小さなサイズの写真と、表示用の写真は別々のものを用意し使う。

サンプル

針ノ木岳から爺ヶ岳への縦走路にて

本サンプル表示のHTML

<div id="stage">
  <input type="radio" id="r1" name="gal">
  <input type="radio" id="r2" name="gal">
  <input type="radio" id="r3" name="gal">
  <input type="radio" id="r4" name="gal">
  <input type="radio" id="r5" name="gal">
  <div id="thumbs">
    <label for="r1"><img src="wp-images/s1.jpg"></label>
    <label for="r2"><img src="wp-images/s2.jpg"></label>
    <label for="r3"><img src="wp-images/s3.jpg"></label>
    <label for="r4"><img src="wp-images/s4.jpg"></label>
    <label for="r5"><img src="wp-images/s5.jpg"></label>
  </div>
  <div id="screen"><span id="title">針ノ木岳から爺ヶ岳への縦走路にて</span></div>  
  <div id="photo1"><img src="wp-images/1.jpg"></div>
  <div id="photo2"><img src="wp-images/2.jpg"></div>
  <div id="photo3"><img src="wp-images/3.jpg"></div>
  <div id="photo4"><img src="wp-images/4.jpg"></div>
  <div id="photo5"><img src="wp-images/5.jpg"></div>
  <div id="cover"></div>
</div>

HTMLの概要説明

　本サンプルのHTMLは、前項フェイドイン型と全く同じ。

本サンプル表示のCSS

/*ギャラリー全体のコンテナー*/
#stage {
	position: relative;
	width: 660px;
	height: 440px;
	margin: 0 auto;
	overflow: hidden;
}
/*全サムネイルのコンテナー*/
#thumbs {
	position: absolute;
	width: 630px;	
	top: 360px;
	left: 20px;
}
/*サムネイルのマウスオーバーでポインターを手のひらに*/
#thumbs label img {
	cursor: pointer;
}
/*初期画面*/
#screen {
	position: absolute;
	left: 30px;
	top: 10px;
	width: 600px;
	height: 338px;
	background-color: #CCC;
}
/*初期画面上の文字*/
#screen span {
	position:absolute;
	top:130px;
	left:50px;
	font-size:32px;
}
/*ラジオボタンを非表示に*/
#r1, #r2, #r3, #r4, #r5 {
	display: none;
}
/*表示写真の初期配置（全部画面右に透明配置）とtransition設定*/
#photo1, #photo2, #photo3, #photo4, #photo5 {
	position: absolute;
	left: 630px;
	top: 10px;
	opacity:0;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
/*チェックされたサムネイルに相当する写真だけを画面中央に移動・FadeIn*/
#r1:checked ~ #photo1, #r2:checked ~ #photo2, #r3:checked ~ #photo3, #r4:checked ~ #photo4, #r5:checked ~ #photo5 {
	//position:absolute;
	left:30px;
	opacity:1;
}
/*どれかがチェックされたらスクリーン上の文字を非表示に*/
#r1:checked ~ #screen span, #r2:checked ~ #screen span, #r3:checked ~ #screen span, #r4:checked ~ #screen span, #r5:checked ~ #screen span {
	opacity: 0;
}
/*画面右側のstage部を隠すためのカバー*/
#cover {
	position:absolute;
	left:630px;
	width:30px;
	height:348px;
	background-color:#FFF;
}

CSSの概要説明

・cssも前項、フェイドイン型とほぼ同じであるが、以下の記述が異なる。
・表示写真を全部スクリーンの右側に初期配置している。
・スライド移動（transition）は、leftのpx値で設定している（opacityも同時設定）。
・ステージとスクリーンとの間の右側余白に表示以外の写真が見えないように、背景色と同じ色の矩形を配置している。
・stage以外の部分が見えないように、stageにoverflow:none;を付加している。