格子状に配置されたサムネイルをロールオーバーすると、マウスがのったサムネイルが拡大し、その他のサムネイルが縮んで全体の格子の幅・高さは変わらないという効果を持つサムネイルクリック型のフォトギャラリーである。拡大したサムネイルをクリックすると、格子幅・高さいっぱいに画像が拡大される。
サンプル（DEMO）
本サンプル表示用HTML
<div id="container">
<input id="r1" type="radio" name="gal">
<input id="r2" type="radio" name="gal">
<input id="r3" type="radio" name="gal">
<input id="r4" type="radio" name="gal">
<input id="r5" type="radio" name="gal">
<input id="r6" type="radio" name="gal">
<input id="r7" type="radio" name="gal">
<input id="r8" type="radio" name="gal">
<input id="r9" type="radio" name="gal">
<input id="r10" type="radio" name="gal">
<input id="r11" type="radio" name="gal">
<input id="r12" type="radio" name="gal">
<input id="r13" type="radio" name="gal">
<input id="r14" type="radio" name="gal">
<input id="r15" type="radio" name="gal">
<input id="r16" type="radio" name="gal">
<input id="r20" type="radio" name="gal">
<!-- テーブル（グリッド） -->
<div id="stage">
<!-- 行・行内に４つのセル（それぞれに写真） -->
<div id="row1" class="row">
<label for="r1" class="cell1"><img src="wp-images/img10/1.jpg" alt="" /></label>
<label for="r2" class="cell2"><img src="wp-images/img10/2.jpg" alt="" /></label>
<label for="r3" class="cell3"><img src="wp-images/img10/3.jpg" alt="" /></label>
<label for="r4" class="cell4"><img src="wp-images/img10/4.jpg" alt="" /></label>
</div>
<div id="row2" class="row">
<label for="r5" class="cell1"><img src="wp-images/img10/5.jpg" alt="" /></label>
<label for="r6" class="cell2"><img src="wp-images/img10/6.jpg" alt="" /></label>
<label for="r7" class="cell3"><img src="wp-images/img10/7.jpg" alt="" /></label>
<label for="r8" class="cell4"><img src="wp-images/img10/8.jpg" alt="" /></label>
</div>
<div id="row3" class="row">
<label for="r9" class="cell1"><img src="wp-images/img10/9.jpg" alt="" /></label>
<label for="r10" class="cell2"><img src="wp-images/img10/10.jpg" alt="" /></label>
<label for="r11" class="cell3"><img src="wp-images/img10/11.jpg" alt="" /></label>
<label for="r12" class="cell4"><img src="wp-images/img10/12.jpg" alt="" /></label>
</div>
<div id="row4" class="row">
<label for="r13" class="cell1"><img src="wp-images/img10/13.jpg" alt="" /></label>
<label for="r14" class="cell2"><img src="wp-images/img10/14.jpg" alt="" /></label>
<label for="r15" class="cell3"><img src="wp-images/img10/15.jpg" alt="" /></label>
<label for="r16" class="cell4"><img src="wp-images/img10/16.jpg" alt="" /></label>
</div>
</div>
<!-- 閉じるボタン -->
<div id="close_btn"><label for="r20">×</label></div>
</div>
本サンプル表示用CSS
/* ラジオボタンを非表示に */
#r1,#r2,#r3,#r4,#r5,#r6,#r7,#r8,#r9,#r10,#r11,#r12,#r13,#r14,#r15,#r16,#r17,#r18,#r19,#r20 { display:none; }
/* 表示枠 */
#container { position:relative; max-width:600px;max-height:600px; }
/* 枠内一杯にテーブル */
#stage { position:relative;display:table;width:100%;}
/* 行 */
#stage .row { display:table-row; }
/* セル（辺が150pxの正方形に設定し、transitionを設定） */
#stage .row label { display:table-cell;width:150px;height:150px;border:#fff 1px solid;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s; }
/* セル内にセルの大きさで写真を表示、サムネイル下の隙間を削除 */
#stage .row label img { width:100%;height:100%;vertical-align: bottom; }
/* テーブルhoverですべてのセルを縮小 */
#stage:hover > div label { width:80px; height:80px; cursor:pointer; }
/* 行hoverでその行だけ高さを拡大 */
#stage .row:hover > label { height:360px; }
/* セルhoverで、そのセルの列だけ幅を拡大 */
#stage .row .cell1:hover { width:360px; }
#stage .row .cell2:hover { width:360px; }
#stage .row .cell3:hover { width:360px; }
#stage .row .cell4:hover { width:360px; }
/* サムネイルクリックでその写真を画面いっぱいに拡大表示し、
その他のサムネイル格納セルの幅・高さを0にして枠線をなくし、写真を非表示にする */
#r1:checked ~ #stage .row label[for="r1"] { width:600px;height:600px; }
#r1:checked ~ #stage .row label:not([for="r1"]) { width:0;height:0;border:none; }
#r1:checked ~ #stage .row label:not([for="r1"]) img { display:none; }
#r2:checked ~ #stage .row label[for="r2"] { width:600px;height:600px; }
#r2:checked ~ #stage .row label:not([for="r2"]) { width:0;height:0;border:none; }
#r2:checked ~ #stage .row label:not([for="r2"]) img { display:none; }
#r3:checked ~ #stage .row label[for="r3"] { width:600px;height:600px; }
#r3:checked ~ #stage .row label:not([for="r3"]) { width:0;height:0;border:none; }
#r3:checked ~ #stage .row label:not([for="r3"]) img { display:none; }
#r4:checked ~ #stage .row label[for="r4"] { width:600px;height:600px; }
#r4:checked ~ #stage .row label:not([for="r4"]) { width:0;height:0;border:none; }
#r4:checked ~ #stage .row label:not([for="r4"]) img { display:none; }
#r5:checked ~ #stage .row label[for="r5"] { width:600px;height:600px; }
#r5:checked ~ #stage .row label:not([for="r5"]) { width:0;height:0;border:none; }
#r5:checked ~ #stage .row label:not([for="r5"]) img { display:none; }
#r6:checked ~ #stage .row label[for="r6"] { width:600px;height:600px; }
#r6:checked ~ #stage .row label:not([for="r6"]) { width:0;height:0;border:none; }
#r6:checked ~ #stage .row label:not([for="r6"]) img { display:none; }
#r7:checked ~ #stage .row label[for="r7"] { width:600px;height:600px; }
#r7:checked ~ #stage .row label:not([for="r7"]) { width:0;height:0;border:none; }
#r7:checked ~ #stage .row label:not([for="r7"]) img { display:none; }
#r8:checked ~ #stage .row label[for="r8"] { width:600px;height:600px; }
#r8:checked ~ #stage .row label:not([for="r8"]) { width:0;height:0;border:none; }
#r8:checked ~ #stage .row label:not([for="r8"]) img { display:none; }
#r9:checked ~ #stage .row label[for="r9"] { width:600px;height:600px; }
#r9:checked ~ #stage .row label:not([for="r9"]) { width:0;height:0;border:none; }
#r9:checked ~ #stage .row label:not([for="r9"]) img { display:none; }
#r10:checked ~ #stage .row label[for="r10"] { width:600px;height:600px; }
#r10:checked ~ #stage .row label:not([for="r10"]) { width:0;height:0;border:none; }
#r10:checked ~ #stage .row label:not([for="r10"]) img { display:none; }
#r11:checked ~ #stage .row label[for="r11"] { width:600px;height:600px; }
#r11:checked ~ #stage .row label:not([for="r11"]) { width:0;height:0;border:none; }
#r11:checked ~ #stage .row label:not([for="r11"]) img { display:none; }
#r12:checked ~ #stage .row label[for="r12"] { width:600px;height:600px; }
#r12:checked ~ #stage .row label:not([for="r12"]) { width:0;height:0;border:none; }
#r12:checked ~ #stage .row label:not([for="r12"]) img { display:none; }
#r13:checked ~ #stage .row label[for="r13"] { width:600px;height:600px; }
#r13:checked ~ #stage .row label:not([for="r13"]) { width:0;height:0;border:none; }
#r13:checked ~ #stage .row label:not([for="r13"]) img { display:none; }
#r14:checked ~ #stage .row label[for="r14"] { width:600px;height:600px; }
#r14:checked ~ #stage .row label:not([for="r14"]) { width:0;height:0;border:none; }
#r14:checked ~ #stage .row label:not([for="r14"]) img { display:none; }
#r15:checked ~ #stage .row label[for="r15"] { width:600px;height:600px; }
#r15:checked ~ #stage .row label:not([for="r15"]) { width:0;height:0;border:none; }
#r15:checked ~ #stage .row label:not([for="r15"]) img { display:none; }
#r16:checked ~ #stage .row label[for="r16"] { width:600px;height:600px; }
#r16:checked ~ #stage .row label:not([for="r16"]) { width:0;height:0;border:none; }
#r16:checked ~ #stage .row label:not([for="r16"]) img { display:none; }
/* 閉じるボタンの設定 */
#close_btn {
display:block;
color:#fdd;font-size:50px; font-weight:bold;
position:absolute;top:5px;right:10px;
z-index:100;
}
#close_btn:hover { color:#f00; cursor:pointer; }