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

サンプル

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

本サンプル表示のHTML

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

HTMLの概要説明

・ラジオボタンを写真の枚数分配置し、idをr1,r2,,,r5とする。
・サムネイル写真をラジオボタンのラベルとして配置し、for= を使って関連付ける。
　（サムネイルをクリックすると、該当するラジオボタンがチェックされたことになる）
・表示させる写真をstage中央に全部重ねて配置する。
　（cssで全部透明にして非表示にする）

本サンプル表示のCSS

/*ギャラリー全体のコンテナー*/
#stage {
	position: relative;
	width: 660px;
	height: 440px;
	margin: 0 auto;
}
/*全サムネイルのコンテナー*/
#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: 30px;
	top: 10px;
	opacity: 0;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
/*チェックされたサムネイルに相当する写真だけを表示*/
#r1:checked ~ #photo1, #r2:checked ~ #photo2, #r3:checked ~ #photo3, #r4:checked ~ #photo4, #r5:checked ~ #photo5 {
	opacity: 1;
}
/*どれかがチェックされたらスクリーン上の文字を非表示に*/
#r1:checked ~ #screen, #r2:checked ~ #screen, #r3:checked ~ #screen, #r4:checked ~ #screen, #r5:checked ~ #screen {
	opacity: 0;
}

CSSの説明

・表示させる写真（photo1 – photo5）の初期配置時の透明度（opacity）を 0 としておく
・それぞれの写真に、transition propaty をセットしておく(transition: all 1s ease;）
　（ここでは要素として透明度しかないので、allはopacityでも可）
・#r1:checked ~ #photo1 { opacity:1;}　は、
1番目のラジオボタン（サムネイル）がクリックされたら、1番目の写真の透明度を1秒掛けて1にするという意。