全スライド枚数で等分したスライス画像（このデモではスライド枚数が5枚なので、5等分した画像）を、一枚分のスライドになるように水平に並べ、各スライスをクリックすると該当する画像がフェイドインするタイプのフォトギャラリーである。前項の「スライス画像遷移型スライドショー」のフォトギャラリー版である。
サンプル(DEMO)
用意する画像（このサンプルの場合）
・600*400pxのスライド5枚
・120*400pxのスライス画像各1枚（各スライドの登場番手に相当するスライス）
本サンプル表示用HTML
<div id="stage">
<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" />
<div id="slices">
<label for="r1"><img src="img9/1s.jpg"><div></div></label>
<label for="r2"><img src="img9/2s.jpg"><div></div></label>
<label for="r3"><img src="img9/3s.jpg"><div></div></label>
<label for="r4"><img src="img9/4s.jpg"><div></div></label>
<label for="r5"><img src="img9/5s.jpg"><div></div></label>
</div>
<div id="photos">
<ul>
<li><img src="img9/1.jpg"></li>
<li><img src="img9/2.jpg"></li>
<li><img src="img9/3.jpg"></li>
<li><img src="img9/4.jpg"></li>
<li><img src="img9/5.jpg"></li>
</ul>
</div>
<div id="screen"><label for="r6"><span>×</span></label></div>
</div>
<!-- 以下の記述は表示枠の高さ保持のためで22%の値は要調整 -->
<div style="padding-top:22%"></div>
本サンプル表示用CSS
/* 表示枠 */
#stage { position:relative;max-width:600px; }
/* li属性、画像下に生成するスペース除去 */
li { list-style:none; }
li img { display:block; }
/* スライドを全て同じ位置に透明で配置 */
#photos li {
position:absolute; top:0; left:0;
opacity:0;
pointer-events:none;
transition:opacity 2s ease;
}
/* スライド画像を伸縮可に */
#photos li img { width:100%; }
/* 各スライスを上付きに、幅を1/5に */
#slices label {
position:absolute; top:0;
width:20%;
cursor:pointer;
}
/* スライス画像を伸縮可に */
#slices label img { width:100%; }
/* 各スライス画像の上に同じサイズで黒い矩形（表示時はopacity:0.2）を置く */
#slices label div { width:100%;height:100%;background:#000; position:absolute; top:0; opacity:0.2; }
#slices label:nth-child(1) { left:0%; }
#slices label:nth-child(2) { left:20%; }
#slices label:nth-child(3) { left:40%; }
#slices label:nth-child(4) { left:60%; }
#slices label:nth-child(5) { left:80%; }
/* スライス画像にタイミングを合わせて各矩形をanimateで透明にする */
#slices label:nth-child(1):hover > div { opacity:0; }
#slices label:nth-child(2):hover > div { opacity:0; }
#slices label:nth-child(3):hover > div { opacity:0; }
#slices label:nth-child(4):hover > div { opacity:0; }
#slices label:nth-child(5):hover > div { opacity:0; }
/* sutageの最上部に全体を覆うスクリーンを置く（初期は非表示） */
#screen { width:100%;height:100%; position:absolute; top:0; left:0;display:none;}
/* スクリーン内右上にスライド非表示ボタンを配置 */
#screen label span { position:absolute; top:2%;left:90%;font:bold 40px "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;
color:#FFFFFF;opacity:0; }
#screen label span:hover { color:orange; cursor:pointer; }
/* 各スライスのクリックで該当するスライドををFadeInさせる */
#r1:checked ~ #photos li:nth-child(1) { opacity:1; }
#r2:checked ~ #photos li:nth-child(2) { opacity:1; }
#r3:checked ~ #photos li:nth-child(3) { opacity:1; }
#r4:checked ~ #photos li:nth-child(4) { opacity:1; }
#r5:checked ~ #photos li:nth-child(5) { opacity:1; }
/* 各スライスクリックでスクリーンを表示、stage全体をクリック不能にする */
#r1:checked ~ #screen,#r2:checked ~ #screen,#r3:checked ~ #screen,#r4:checked ~ #screen,#r5:checked ~ #screen { display:block; }
/* 各スライスクリックでスライド非表示ボタンをFadeInさせる */
#r1:checked ~ #screen label span,#r2:checked ~ #screen span,#r3:checked ~ #screen span,#r4:checked ~ #screen span,#r5:checked ~ #screen label span{
opacity:1;
animation:show 2s ease;
}
@keyframes show{
from{ opacity: 0; }
to{ opacity: 1; }
}