２段階移動 -> 拡大型フォトギャラリー

画面下部に配置されたサムネイルをクリックすると、そのサムネイルがまず画面中央にそのサイズのまま移動し、0.1静止した後、拡大して写真が表示されるタイプのフォトギャラリーである。
cssのanimationプロパティーを使って、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="subtitle">
  	<span id="st1">朝焼けの針ノ木岳</span>
  	<span id="st2">針ノ木岳、スバリ岳を背に岩小屋沢岳への登り</span>
  	<span id="st3">剣岳を真近に望む</span>
  	<span id="st4">鹿島槍ヶ岳、後立山連峰</span>
  	<span id="st5">岩小屋沢、鳴沢岳を背に岳爺ヶ岳への登り</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の概要説明

・ラジオボタン、サムネイル写真の配置は、前項同時移動拡大型と同じ。
・各写真切替時に写真の題名表示のための#subtitle,st1,,,st5 を記述している。

本サンプル表示用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;
}
#photo1,#photo2,#photo3,#photo4,#photo5 {
	position:absolute;
	top:360px;
	float:left;
	width:120px;
	height:68px;
}
#photo1 {left:20px;}
#photo2 {left:145px;}
#photo3 {left:270px;}
#photo4 {left:395px;}
#photo5 {left:520px;}

#photo1 img,#photo2 img,#photo3 img,#photo4 img,#photo5 img {
        /* 記述変更
	width:120px;
	height:68px;
	cursor: pointer;*/
        width:100%;
}
/* 追加 */
#photo1 img:hover,#photo2 img:hover,#photo3 img:hover,#photo4 img:hover,#photo5 img:hover {
	cursor: pointer;
}
#subtitle {
	position:absolute;
	left:100px;
	top:50px;
	width:500px;
	font-size:22px;
}
#subtitle #st1,#subtitle #st2,#subtitle #st3,#subtitle #st4,#subtitle #st5 {
	position:absolute;
	left:0;
	top:0;
	opacity:0;
}
/* 以下、この項すべて削除
#r1:checked ~ #photo1 img,#r2:checked ~ #photo2 img,#r3:checked ~ #photo3 img,#r4:checked ~ #photo4 img,#r5:checked ~ #photo5 img {
	-webkit-animation: expand 2s ease;
	-moz-animation: expand 2s ease;
	-o-animation: expand 2s ease;
	animation: expand 2s ease;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
*/
#r1:checked ~ #photo1,#r2:checked ~ #photo2,#r3:checked ~ #photo3,#r4:checked ~ #photo4,#r5:checked ~ #photo5 {
	-webkit-animation: expand 2s ease;
	-moz-animation: expand 2s ease;
	-o-animation: expand 2s ease;
	animation: expand 2s ease;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
#r1:checked ~ #screen span, #r2:checked ~ #screen span, #r3:checked ~ #screen span, #r4:checked ~ #screen span, #r5:checked ~ #screen span {
	opacity: 0;
}
#r1:checked ~ #subtitle #st1,#r2:checked ~ #subtitle #st2,#r3:checked ~ #subtitle #st3,#r4:checked ~ #subtitle #st4,#r5:checked ~ #subtitle #st5 {	
	opacity:1;
}
@-webkit-keyframes expand {
	50% { width:120px;height:68px; left:270px;top:145px;}
	60% { width:120px;height:68px; left:270px;top:145px;}
	100% { width:600px;height:338px; position:absolute;left:30px;top:10px;}
}
@-moz-keyframes expand {
	50% { width:120px;height:68px; left:270px;top:145px;}
	60% { width:120px;height:68px; left:270px;top:145px;}
	100% { width:600px;height:338px; position:absolute;left:30px;top:10px;}
}
@-o-keyframes expand {
	50% { width:120px;height:68px; left:270px;top:145px;}
	60% { width:120px;height:68px; left:270px;top:145px;}
	100% { width:600px;height:338px; position:absolute;left:30px;top:10px;}
}
@keyframes expand {	
	50% { width:120px;height:68px; left:270px;top:145px;}
	60% { width:120px;height:68px; left:270px;top:145px;}
	100% { width:600px;height:338px; position:absolute;left:30px;top:10px;}
}

CSSのスポット説明

・ラジオボタン、サムネイルの配置は、前項同時移動拡大型と同じ。
・各写真切替時題名表示用 div(#subtitle),span(#st1,,,#st5)を設定。
・animationは、サムネイルクリックで開始させる。
・animation プロパティーで、width,height,left,top の値を、全2秒の間の、50,60,100%に設定する。
　（50%(1秒)でサイズを保ったまま中央に移動し、60%まで静止し、2秒後に表示サイズまで拡大する）
・animation の animation-fill-mode: forwards; は、animationが100%終了した時点でそのままの状態を保つ。