HTML
<!-- ラジオボタンの設置 -->
<input id="r1" type="radio" name="select_btn">
<input id="r2" type="radio" name="select_btn">
<input id="r3" type="radio" name="select_btn">
<input id="r4" type="radio" name="select_btn">
<!-- 画面 -->
<div id="stage">
<!-- シリーズ選択ボタンの設置とラジオボタンとの関連付け -->
<a href="#p110"><label for="r1"><div id="ser_thumb1" class="ser_thumb"><img src="img_kami/s0.jpg"></div></label></a>
<a href="#p110"><label for="r2"><div id="ser_thumb2" class="ser_thumb"><img src="img_hodaka/s0.jpg"></div></label></a>
<a href="#p110"><label for="r3"><div id="ser_thumb3" class="ser_thumb"><img src="img_yari/s0.jpg"></div></label></a>
<a href="#p110"><label for="r4"><div id="ser_thumb4" class="ser_thumb"><img src="img_chyo/s0.jpg"></div></label></a>
<!-- シリーズ１のサムネイル群及び拡大写真表示枠 -->
<div id="ser1" class="frame">
<!-- サムネイルの配置と拡大写真へのリンク設定 -->
<div id="p1_1" class="thumb"><a href="#p11"><img src="img_kami/s1.jpg"></a></div>
<div id="p1_2" class="thumb"><a href="#p12"><img src="img_kami/s2.jpg"></a></div>
<div id="p1_3" class="thumb"><a href="#p13"><img src="img_kami/s3.jpg"></a></div>
<div id="p1_4" class="thumb"><a href="#p14"><img src="img_kami/s4.jpg"></a></div>
<div id="p1_5" class="thumb"><a href="#p15"><img src="img_kami/s5.jpg"></a></div>
<div id="p1_6" class="thumb"><a href="#p16"><img src="img_kami/s6.jpg"></a></div>
<div id="p1_7" class="thumb"><a href="#p17"><img src="img_kami/s7.jpg"></a></div>
<div id="p1_8" class="thumb"><a href="#p18"><img src="img_kami/s8.jpg"></a></div>
<div id="p1_9" class="thumb"><a href="#p19"><img src="img_kami/s9.jpg"></a></div>
<!-- 拡大写真の設定と閉じるボタンの配置 -->
<div id="p11" class="photo"><img src="img_kami/1.jpg"><a href="#p110" class="thumb"><span>?close</span></a></div>
<div id="p12" class="photo"><img src="img_kami/2.jpg"><a href="#p110" class="thumb"><span>?close</span></a></div>
<div id="p13" class="photo"><img src="img_kami/3.jpg"><a href="#p110" class="thumb"><span>?close</span></a></div>
<div id="p14" class="photo"><img src="img_kami/4.jpg"><a href="#p110" class="thumb"><span>?close</span></a></div>
<div id="p15" class="photo"><img src="img_kami/5.jpg"><a href="#p110" class="thumb"><span>?close</span></a></div>
<div id="p16" class="photo"><img src="img_kami/6.jpg"><a href="#p110" class="thumb"><span>?close</span></a></div>
<div id="p17" class="photo"><img src="img_kami/7.jpg"><a href="#p110" class="thumb"><span>?close</span></a></div>
<div id="p18" class="photo"><img src="img_kami/8.jpg"><a href="#p110" class="thumb"><span>?close</span></a></div>
<div id="p19" class="photo"><img src="img_kami/9.jpg"><a href="#p110" class="thumb"><span>?close</span></a></div>
</div>
<!-- シリーズ２ -->
<div id="ser2" class="frame">
<div id="p2_1" class="thumb"><a href="#p21"><img src="img_hodaka/s1.jpg"></a></div>
<div id="p2_2" class="thumb"><a href="#p22"><img src="img_hodaka/s2.jpg"></a></div>
<div id="p2_3" class="thumb"><a href="#p23"><img src="img_hodaka/s3.jpg"></a></div>
<div id="p2_4" class="thumb"><a href="#p24"><img src="img_hodaka/s4.jpg"></a></div>
<div id="p2_5" class="thumb"><a href="#p25"><img src="img_hodaka/s5.jpg"></a></div>
<div id="p2_6" class="thumb"><a href="#p26"><img src="img_hodaka/s6.jpg"></a></div>
<div id="p2_7" class="thumb"><a href="#p27"><img src="img_hodaka/s7.jpg"></a></div>
<div id="p2_8" class="thumb"><a href="#p28"><img src="img_hodaka/s8.jpg"></a></div>
<div id="p2_9" class="thumb"><a href="#p29"><img src="img_hodaka/s9.jpg"></a></div>
<div id="p21" class="photo"><img src="img_hodaka/1.jpg"><a href="#p110" class="thumb"><span>?close</span></a></div>
<div id="p22" class="photo"><img src="img_hodaka/2.jpg"><a href="#p110" class="thumb"><span>?close</span></a></div>
<div id="p23" class="photo"><img src="img_hodaka/3.jpg"><a href="#p110" class="thumb"><span>?close</span></a></div>
<div id="p24" class="photo"><img src="img_hodaka/4.jpg"><a href="#p110" class="thumb"><span>?close</span></a></div>
<div id="p25" class="photo"><img src="img_hodaka/5.jpg"><a href="#p110" class="thumb"><span>?close</span></a></div>
<div id="p26" class="photo"><img src="img_hodaka/6.jpg"><a href="#p110" class="thumb"><span>?close</span></a></div>
<div id="p27" class="photo"><img src="img_hodaka/7.jpg"><a href="#p110" class="thumb"><span>?close</span></a></div>
<div id="p28" class="photo"><img src="img_hodaka/8.jpg"><a href="#p110" class="thumb"><span>?close</span></a></div>
<div id="p29" class="photo"><img src="img_hodaka/9.jpg"><a href="#p110" class="thumb"><span>?close</span></a></div>
</div>
<!-- シリーズ３ -->
<div id="ser3" class="frame">
<div id="p3_1" class="thumb"><a href="#p31"><img src="img_yari/s1.jpg"></a></div>
<div id="p3_2" class="thumb"><a href="#p32"><img src="img_yari/s2.jpg"></a></div>
<div id="p3_3" class="thumb"><a href="#p33"><img src="img_yari/s3.jpg"></a></div>
<div id="p3_4" class="thumb"><a href="#p34"><img src="img_yari/s4.jpg"></a></div>
<div id="p3_5" class="thumb"><a href="#p35"><img src="img_yari/s5.jpg"></a></div>
<div id="p3_6" class="thumb"><a href="#p36"><img src="img_yari/s6.jpg"></a></div>
<div id="p3_7" class="thumb"><a href="#p37"><img src="img_yari/s7.jpg"></a></div>
<div id="p3_8" class="thumb"><a href="#p38"><img src="img_yari/s8.jpg"></a></div>
<div id="p3_9" class="thumb"><a href="#p39"><img src="img_yari/s9.jpg"></a></div>
<div id="p31" class="photo"><img src="img_yari/1.jpg"><a href="#p110"><span>?close</span></a></div>
<div id="p32" class="photo"><img src="img_yari/2.jpg"><a href="#p110" class="thumb"><span>?close</span></a></div>
<div id="p33" class="photo"><img src="img_yari/3.jpg"><a href="#p110" class="thumb"><span>?close</span></a></div>
<div id="p34" class="photo"><img src="img_yari/4.jpg"><a href="#p110" class="thumb"><span>?close</span></a></div>
<div id="p35" class="photo"><img src="img_yari/5.jpg"><a href="#p110" class="thumb"><span>?close</span></a></div>
<div id="p36" class="photo"><img src="img_yari/6.jpg"><a href="#p110" class="thumb"><span>?close</span></a></div>
<div id="p37" class="photo"><img src="img_yari/7.jpg"><a href="#p110" class="thumb"><span>?close</span></a></div>
<div id="p38" class="photo"><img src="img_yari/8.jpg"><a href="#p110" class="thumb"><span>?close</span></a></div>
<div id="p39" class="photo"><img src="img_yari/9.jpg"><a href="#p110" class="thumb"><span>?close</span></a></div>
</div>
<!-- シリーズ４ -->
<div id="ser4" class="frame">
<div id="p4_1" class="thumb"><a href="#p41"><img src="img_chyo/s1.jpg"></a></div>
<div id="p4_2" class="thumb"><a href="#p42"><img src="img_chyo/s2.jpg"></a></div>
<div id="p4_3" class="thumb"><a href="#p43"><img src="img_chyo/s3.jpg"></a></div>
<div id="p4_4" class="thumb"><a href="#p44"><img src="img_chyo/s4.jpg"></a></div>
<div id="p4_5" class="thumb"><a href="#p45"><img src="img_chyo/s5.jpg"></a></div>
<div id="p4_6" class="thumb"><a href="#p46"><img src="img_chyo/s6.jpg"></a></div>
<div id="p4_7" class="thumb"><a href="#p47"><img src="img_chyo/s7.jpg"></a></div>
<div id="p4_8" class="thumb"><a href="#p48"><img src="img_chyo/s8.jpg"></a></div>
<div id="p4_9" class="thumb"><a href="#p49"><img src="img_chyo/s9.jpg"></a></div>
<div id="p41" class="photo"><img src="img_chyo/1.jpg"><a href="#p110" class="thumb"><span>?close</span></a></div>
<div id="p42" class="photo"><img src="img_chyo/2.jpg"><a href="#p110" class="thumb"><span>?close</span></a></div>
<div id="p43" class="photo"><img src="img_chyo/3.jpg"><a href="#p110" class="thumb"><span>?close</span></a></div>
<div id="p44" class="photo"><img src="img_chyo/4.jpg"><a href="#p110" class="thumb"><span>?close</span></a></div>
<div id="p45" class="photo"><img src="img_chyo/5.jpg"><a href="#p110" class="thumb"><span>?close</span></a></div>
<div id="p46" class="photo"><img src="img_chyo/6.jpg"><a href="#p110" class="thumb"><span>?close</span></a></div>
<div id="p47" class="photo"><img src="img_chyo/7.jpg"><a href="#p110" class="thumb"><span>?close</span></a></div>
<div id="p48" class="photo"><img src="img_chyo/8.jpg"><a href="#p110" class="thumb"><span>?close</span></a></div>
<div id="p49" class="photo"><img src="img_chyo/9.jpg"><a href="#p110" class="thumb"><span>?close</span></a></div>
</div>
</div>
CSS
/* ギャラリー画面 */
#stage {
position: relative;
width: 768px;
height: 420px;
background: #777;
padding-top: 50px;
margin: 0 auto;
}
/* シリーズメニュータイトル */
.ser_thumb {
transform-origin: 0% 50%;
transform: perspective(200px) rotateY(30deg);
transition: all ease 0.3s;
-webkit-transform-origin: 0% 50%;
-webkit-transform: perspective(200px) rotateY(30deg);
-webkit-transition: all ease 0.3s;
}
.ser_thumb:hover {
cursor: pointer;
transform-origin: 0% 50%;
transform: perspective(0px) rotateY(0deg);
-webkit-transform-origin: 0% 50%;
-webkit-transform: perspective(0px) rotateY(0deg);
}
/* 各タイトルの配置 */
#ser_thumb1 {
position: absolute;
top: 5%;
left: 2%;
}
#ser_thumb2 {
position: absolute;
top: 28%;
left: 2%;
}
#ser_thumb3 {
position: absolute;
top: 51%;
left: 2%;
}
#ser_thumb4 {
position: absolute;
top: 74%;
left: 2%;
}
/* サムネイル・拡大写真の表示枠 */
.frame {
position: absolute;
left: 25%;
top: 7%;
pointer-events : none;
}
/* サムネイルのスタイル・transition設定 */
.thumb {
float: left;
width: 150px;
margin: 5px;
text-decoration: none;
transform-origin: 50% 50%;
transform: scale(0, 0);
transition: all 0.7s ease;
-webkit-transform-origin: 50% 50%;
-webkit-transform: scale(0, 0);
-webkit-transition: transform 0.7s ease;
}
.thumb img {
width: 100%;
}
/* 閉じるボタンの設定 */
.photo span {
display: block;
color: white;
font-size: 28px;
}
/* ラジオボタンを非表示に */
#r1, #r2, #r3, #r4 {
display: none;
}
/* シリーズタイトルをクリックしたときの設定 */
/* サムネイル群の表示とクリック可能に */
#r1:checked ~ #stage #ser1 .thumb {
pointer-events: auto;
transform: scale(1, 1);
-webkit-transform: scale(1, 1);
}
#r1:checked ~ #stage #ser2 .photo,#r1:checked ~ #stage #ser3 .photo,#r1:checked ~ #stage #ser4 .photo {
opacity:0;
}
#r2:checked ~ #stage #ser2 .thumb {
pointer-events: auto;
transform: scale(1, 1);
-webkit-transform: scale(1, 1);
}
#r2:checked ~ #stage #ser1 .photo,#r2:checked ~ #stage #ser3 .photo,#r2:checked ~ #stage #ser4 .photo {
opacity:0;
}
#r3:checked ~ #stage #ser3 .thumb {
pointer-events: auto;
transform: scale(1, 1);
-webkit-transform: scale(1, 1);
}
#r3:checked ~ #stage #ser1 .photo,#r3:checked ~ #stage #ser2 .photo,#r3:checked ~ #stage #ser4 .photo {
opacity:0;
}
#r4:checked ~ #stage #ser4 .thumb {
pointer-events: auto;
transform: scale(1, 1);
-webkit-transform: scale(1, 1);
}
#r4:checked ~ #stage #ser1 .photo,#r4:checked ~ #stage #ser2 .photo,#r4:checked ~ #stage #ser3 .photo {
opacity:0;
}
/* 拡大写真 */
.photo {
opacity: 0;
position: absolute;
top:0;
left:0;
width: 95%;
transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
}
/* クリックされた該当写真を表示 */
.photo:target {
opacity: 1;
}
/* 写真サイズ */
.photo img, .photo2 img, .photo3 img {
width: 100%;
}
