4chan 等の画像付き掲示板で、画像（サムネイル）をクリックすると、同じ位置に拡大写真が表示され、回りこんでいたテキスト文が画像の下に表示されるのを見かけるが、これを、CSSで作成した。

サンプル

　朝、雲海に浮かぶ浅間山を赤く染めて日の出を迎える。やがて、彼方に富士山、八ヶ岳が雲海に浮かんで見え、針ノ木岳が赤く染まる。新越山荘は今日の好天気を期待させる朝を迎えた。
６時５分、新越山荘を出発。尾根の東側のゆるやかな登りを登りつめ稜線に出た所で、見えた、やりました、雲海の向こうに立山連峰と剱岳がその秀麗な姿を見せている。新越山荘に宿泊したことが大正解の大成功。

　ここからの稜線歩きは、登りにもかかわらず、早く周りの山々を見渡したいという気持ちから、思わず足早になるが、一方では、何度も何度も剣・立山を始めだんだん見えてくる周りの山々を眺めては、感激に浸るのであった。そして、幸運なことにブロッケンまで現れ、我々を祝福してくれた。 　岩小屋沢岳の手前のそれに匹敵するようなピークに登りつめると、もう３６０度の大パノラマ。言うことなし。

本サンプル表示用HTML

<article>
<input id="r1" type="radio" name="expnd1" />
<input id="r2" type="radio" name="expnd1"  />
<div id="box1" class="img_box">
    <label for="r1" class="small_img"><img src="img2/s1.jpg" alt="" /></label>
    <label for="r2" class="large_img"><img src="img2/1.jpg" alt="" /></label>
</div>
<div class="txt_box"> 　朝、雲海に浮かぶ浅間山を赤く染めて日の出を迎える。やがて、彼方に富士山、八ヶ岳が雲海に浮かんで見え、針ノ木岳が赤く染まる。新越山荘は今日の好天気を期待させる朝を迎えた。<br />
  ６時５分、新越山荘を出発。尾根の東側のゆるやかな登りを登りつめ稜線に出た所で、見えた、やりました、雲海の向こうに立山連峰と剱岳がその秀麗な姿を見せている。新越山荘に宿泊したことが大正解の大成功。
</div>
</article>
<article>
<input id="r3" type="radio" name="expnd2" />
<input id="r4" type="radio" name="expnd2"  />
<div id="box2" class="img_box">
    <label for="r3" class="small_img"><img src="img2/s2.jpg" alt="" /></label>
    <label for="r4" class="large_img"><img src="img2/2.jpg" alt="" /></label>
</div>
<div class="txt_box"> 　ここからの稜線歩きは、登りにもかかわらず、早く周りの山々を見渡したいという気持ちから、思わず足早になるが、一方では、何度も何度も剣・立山を始めだんだん見えてくる周りの山々を眺めては、感激に浸るのであった。そして、幸運なことにブロッケンまで現れ、我々を祝福してくれた。
　岩小屋沢岳の手前のそれに匹敵するようなピークに登りつめると、もう３６０度の大パノラマ。言うことなし。 </div>
</article>

HTMLのポイント説明

・各article毎に、画像挿入枠（div）とテキスト挿入枠（div）を設け、（cssで）画像を左寄せにし、テキスト文を回り込めるようにする。
・サムネイルにラジオボタン #r1 を、拡大画像に #r2 を関連付ける。

本サンプル表示用CSS

/* ラジオボタンを非表示 */
#r1, #r2, #r3, #r4 {
	display: none;
}
/* 各項目ごとに左寄せ */
article { clear:left; }
/* 画像挿入枠 */
.img_box {
	float: left;
	padding: 5px 10px;
	max-width: 600px;
}
/* 画像サイズを画面サイズに合わせてリサイズ */
.img_box img {
	width: 100%;
}
.small_img {
	cursor: pointer;
}
/* 拡大画像を初期非表示に */
.large_img {
	display: none;
	cursor: pointer;
}
/* テキスト枠 */
.txt_box {
	padding: 10px 0;
}
/* 1項目目サムネイルクリックで左寄せ */
#r1:checked ~ .txt_box {
	clear:left;
}
/* サムネイルクリックでサムネイル非表示、拡大画像表示 */
#r1:checked ~ #box1 .small_img {
	display: none;
}
#r1:checked ~ #box1 .large_img {
	display: block;
}
/* 2項目目サムネイルクリックで左寄せ */
#r3:checked ~ .txt_box {
	clear:left;
}
/* サムネイルクリックでサムネイル非表示、拡大画像表示 */
#r3:checked ~ #box2 .small_img {
	display: none;
}
#r3:checked ~ #box2 .large_img {
	display: block;
}

CSSのポイント説明

・初期は、画像表示枠 img_box にサムネイルを表示し（拡大画像を非表示）、float:left で左寄せにしておき、サムネイルクリックで、拡大画像を表示し（サムネイル非表示）、clear-left でテキスト文は画像の下に表示されるようにする。
・img-box の最大サイズ（max-width）をここでは600pxに設定、画像 img の幅を width:100% とすることにより、画像サイズを画面サイズが600px以下の場合には画面に合わせてリサイズするようにする。