画面下部に配置されたサムネイルをクリックすると、そのサムネイルが拡大しながら移動し、画面中央に写真が表示されるタイプのフォトギャラリーである。
cssのtransitionで、left、top、width、heightの値を変化させている。下部に配置したサムネイルは、大きなサイズの表示写真をサイズダウンして並べている。

サンプル

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

本サンプル表示用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="screen"><span id="title">針ノ木岳から爺ヶ岳への縦走路にて</span></div>
  <div id="photo1"><label for="r1"><img src="wp-images/1.jpg"></label></div>
  <div id="photo2"><label for="r2"><img src="wp-images/2.jpg"></label></div>
  <div id="photo3"><label for="r3"><img src="wp-images/3.jpg"></label></div>
  <div id="photo4"><label for="r4"><img src="wp-images/4.jpg"></label></div>
  <div id="photo5"><label for="r5"><img src="wp-images/5.jpg"></label></div>
</div>

HTMLのポイント説明

・ラジオボタン配置までは、前項までのHTMLと同じ。
・画面下に配置するサムネイルは、表示写真をcssでサイズを小さくして並べる。

本サンプル表示用CSS

/*ギャラリー全体のコンテナー*/
#stage {
	position: relative;
	width: 660px;
	height: 440px;
	margin: 0 auto;
}
/*初期画面*/
#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;
}
/*表示写真用divを画面下部に125px間隔でサムネイルとして一列に並べる*/
#photo1,#photo2,#photo3,#photo4,#photo5 {
	position:absolute;
	top:360px;
	float:left;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
#photo1 {left:20px;}
#photo2 {left:145px;}
#photo3 {left:270px;}
#photo4 {left:395px;}
#photo5 {left:520px;}
/*写真をサムネイルサイズにし、transitionをセット*/
#photo1 img,#photo2 img,#photo3 img,#photo4 img,#photo5 img {
	width:120px;
	height:68px;
	cursor: pointer;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
/*サムネイルがクリックされたら、該当する写真の大きさを元のサイズに拡大する*/
#r1:checked ~ #photo1 img,#r2:checked ~ #photo2 img,#r3:checked ~ #photo3 img,#r4:checked ~ #photo4 img,#r5:checked ~ #photo5 img {
	width:600px;
	height:338px;
}
/*クリックに該当する写真が画面中央にくるようにする*/
#r1:checked ~ #photo1,#r2:checked ~ #photo2,#r3:checked ~ #photo3,#r4:checked ~ #photo4,#r5:checked ~ #photo5 {
	position:absolute;
	left:30px;
	top:10px;
}
/*いずれかのサムネイルがクリックされたら、背景の文字を非表示にする*/
#r1:checked ~ #screen span, #r2:checked ~ #screen span, #r3:checked ~ #screen span, #r4:checked ~ #screen span, #r5:checked ~ #screen span {
	opacity: 0;
}

CSSのポイント説明

・写真格納用div（#photo1,,,,#photo5）を画面下部に125px間隔に並べる。
・初期の写真（#photo1 img,,,,）サイズをサムネイルサイズに設定する。
・写真格納用divに、移動のtransition（left,top）を設定する。
・初期の写真に、拡大のtransition（width,height）を設定する。