フェイドイン型フォトギャラリーを前稿で示したが、ここに示すサンプルは、写真が拡大しながらフェイド・インするタイプである。先に示したフェイドイン型は transition を使っている。この拡大が同時に起こる場合にも、フェイドイン型に、width,heightの変化を加え、写真が中央で拡大するように座標（margin）の補正を施せば作成できる。しかし、このサイトに使っているWordpressのテーマの特性か、うまく作動しない。そこでここでは、animation を使って作成した。

サンプル

本サンプル表示の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" class="photo"><img src="wp-images/1.jpg"></div>
  <div id="photo2" class="photo"><img src="wp-images/2.jpg"></div>
  <div id="photo3" class="photo"><img src="wp-images/3.jpg"></div>
  <div id="photo4" class="photo"><img src="wp-images/4.jpg"></div>
  <div id="photo5" class="photo"><img src="wp-images/5.jpg"></div>
</div>

HTMLの概要説明

・フェイドイン型と同じである。ただし、ここでは、#photo1-#photo5 までの div にクラスを割りつけている。

本サンプル表示の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;
}
/*表示写真の初期配置（全部透明に、サイズ半分、画面中央）*/
.photo {
	position: absolute;
	left: 30px;
	top: 10px;
}
.photo img {
	width:300px;
	height:169px;
	opacity:0;
	margin-top:85px;
	margin-left:150px;
}
/*初期画面上の文字*/
#screen span {
	position:absolute;
	top:130px;
	left:50px;
	font-size:32px;
}
/*ラジオボタンを非表示に*/
#r1, #r2, #r3, #r4, #r5 {
	display: none;
}
/*チェックされたサムネイルに相当する写真だけをフェイドイン、拡大イン*/
#r1:checked ~ #photo1 img, #r2:checked ~ #photo2 img, #r3:checked ~ #photo3 img, #r4:checked ~ #photo4 img, #r5:checked ~ #photo5 img {
	-webkit-animation:fade_expand 1s ease;
	animation:fade_expand 1s ease;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
/*どれかがチェックされたらスクリーン上の文字を非表示に*/
#r1:checked ~ #screen, #r2:checked ~ #screen, #r3:checked ~ #screen, #r4:checked ~ #screen, #r5:checked ~ #screen {
	opacity: 0;
}
@-webkit-keyframes fade_expand {
	0% {
		margin-top:85px;
		margin-left:150px;
	}
	100% {
		width:600px;
		height:338px;
		opacity:1;
		margin:0;
	}
}
@keyframes fade_expand {
	0% {
		margin-top:85px;
		margin-left:150px;
	}
	100% {
		width:600px;
		height:338px;
		opacity:1;
		margin:0;
	}
}

CSSのスポット説明

・写真（.photo img ）の初期設定を、サイズ半分、透明、中央表示（marginで調整）とする。
・サムネイルがクリックされた時点で、animation が作動し、サイズを元のサイズに拡大すると同時に透明度をなくしフェイドインさせる。
・animation は、ブラウザ対応として-webkit-のみを記述しているが、Firefox（27.0.1）はこれで正常に動くようだ。
・animation-fill-mode: forwards;は、animation が100%で終了、そのまま停止させる。