サムネイルクリックでその位置で画像拡大2

　4chan 等の画像付き掲示板で、画像（サムネイル）をクリックすると、同じ位置に拡大写真が表示され、回りこんでいたテキスト文が画像の下に表示されるのを見かけるが、これを、CSSで作成した。本稿は、前稿の画像拡大縮小部分をアニメーション化したものである。なお、小サイズ画面に対応させるため、レスポンシブに留意した。なお、画像の表示サイズは、各画像について別々に設定することが可能である。

サンプル

本サンプル表示用HTML

<input id="r0" type="radio" name="expnd" />
<input id="r1" type="radio" name="expnd" />
<input id="r2" type="radio" name="expnd"  />

<label for="r0"><div id="back">

<article>
<div id="box1" class="img_box">
    <label for="r1"><img src="img2/1.jpg" alt=""/></label>
	<div id="cover1" class="cover"></div>
</div>
<div id="txt1" class="txt_box"> 　朝、雲海に浮かぶ浅間山を赤く染めて日の出を迎える。やがて、彼方に富士山、八ヶ岳が雲海に浮かんで見え、針ノ木岳が赤く染まる。新越山荘は今日の好天気を期待させる朝を迎えた。<br />
  ６時５分、新越山荘を出発。尾根の東側のゆるやかな登りを登りつめ稜線に出た所で、見えた、やりました、雲海の向こうに立山連峰と剱岳がその秀麗な姿を見せている。新越山荘に宿泊したことが大正解の大成功。
</div>
</article>

<article>
<div id="box2" class="img_box">
    <label for="r2" ><img src="img2/m2.jpg" alt="" /></label>
	<div id="cover2" class="cover"></div>
</div>
<div id="txt2" class="txt_box"> 　ここからの稜線歩きは、登りにもかかわらず、早く周りの山々を見渡したいという気持ちから、思わず足早になるが、一方では、何度も何度も剣・立山を始めだんだん見えてくる周りの山々を眺めては、感激に浸るのであった。そして、幸運なことにブロッケンまで現れ、我々を祝福してくれた。
　岩小屋沢岳の手前のそれに匹敵するようなピークに登りつめると、もう３６０度の大パノラマ。言うことなし。 </div>
</article>

</div></label>
HTMLのポイント説明
・各articleにdiv、#box1,#txt1(1番目の場合)を配置し、#box1には画像、#txt1にはテキスト文を入れる。
・画像は拡大サイズのものを配置し、初期は、サムネイルサイズとする。
・各画像（ここでは2枚）にラジオボタンを関連付けする。
・画面全体の大きさの背景div、#backを配置し、ラジオボタンに関連付ける。(拡大表示時に画面のどこをクリックしても元に戻るようにするため)
・拡大時に画像クリックで元に戻るようにするため、画像と同じ位置、同じ大きさになるようなdiv、#cover1を配置しておく。


本サンプル表示用CSS
html,body { height:100% }
#back { height:100%;}
/* ラジオボタンを非表示 */
#r0, #r1, #r2 {
	display: none;
}
/* 各項目ごとに左寄せ */
article { clear:left; }
/* 画像挿入枠 */
.img_box {
	float: left;
	padding: 5px 10px;
	max-width: 120px;
	max-height:68px;
	transition:all 0.3s ease;	
	-webkit-transition:all 0.3s ease;
}
/* 画像transition設定 */
.img_box img {
	cursor: pointer;
	width:100%;
	height:100%;
}
/* テキスト枠 */
.txt_box {
	padding: 10px 0;
}
/* 写真を覆うカバー */
.cover { width:100%;height:100%;position:absolute;top:0;left:0;display:none;}
/* サムネイルクリックで左寄せ */
#r1:checked ~ label #back #txt1 {
	clear:left;
}
#r2:checked ~ label #back #txt2 {
	clear:left;
}
/* サムネイルクリックで画像拡大*/
#r1:checked ~ label #back #box1 {
	max-width:600px;max-height:338px;
}
#r1:checked ~ label #back #box1 #cover1 {
	display:block;
}
#r2:checked ~ label #back #box2 {
	max-width:800px;max-height:563px;
}
#r2:checked ~ label #back #box2 #cover2 {
	display:block;
}

CSSのポイント説明
・html,body { height:100% }、#back { height:100%;}は、#backが画面全体をカバーするようにする。

・div.img_boxに、max-widthを、画像にwidth:100% を設定することにより、画面サイズに対応してリサイズするようにする。

・サムネイルがクリックされたら、#txt1は、clear:left により改行され、#box1 にtransition によるアニメーションが発生する。

　なお、clear:left の記述をしなければ、改行はされず、拡大画像の右側にテキストが回り込むようになるので、拡大画像の大きさによっては、こちらの方がよい場合がある。

・画像が拡大された状態で、画像を含む、画面のどこがクリックされても、transitionがとかれ元の状態に戻る。