HTML
<div id="stage">
<div id="leftpart">
<div class="row1">
<a href="#pic1"><div id="p1" class="pic"><img src="img5/s1.jpg" /></div></a>
<a href="#pic2"><div id="p2" class="pic"><img src="img5/s2.jpg" /></div></a>
</div>
<div class="row2">
<a href="#pic6"><div id="p6" class="pic"><img src="img5/s6.jpg" /></div></a>
<a href="#pic7"><div id="p7" class="pic"><img src="img5/s7.jpg" /></div></a>
</div>
<div class="row3">
<a href="#pic11"><div id="p11" class="pic"><img src="img5/s11.jpg" /></div></a>
<a href="#pic12"><div id="p12" class="pic"><img src="img5/s12.jpg" /></div></a>
</div>
</div>
<div id="centerpart">
<a href="#pic3"><div id="p3" class="picc"><img src="img5/s3.jpg" /></div></a>
<a href="#pic8"><div id="p8" class="picc"><img src="img5/s8.jpg" /></div></a>
<a href="#pic13"><div id="p13" class="picc"><img src="img5/s13.jpg" /></div></a>
</div>
<div id="rightpart">
<div class="row1">
<a href="#pic4"><div id="p4" class="pic"><img src="img5/s4.jpg" /></div></a>
<a href="#pic5"><div id="p5" class="pic"><img src="img5/s5.jpg" /></div></a>
</div>
<div class="row2">
<a href="#pic9"><div id="p9" class="pic"><img src="img5/s9.jpg" /></div></a>
<a href="#pic10"><div id="p10" class="pic"><img src="img5/s10.jpg" /></div></a>
</div>
<div class="row3">
<a href="#pic14"><div id="p14" class="pic"><img src="img5/s14.jpg" /></div></a>
<a href="#pic15"><div id="p15" class="pic"><img src="img5/s15.jpg" /></div></a>
</div>
</div>
<div id="frame">
<a href="#pic20"><div id="pic1" class="photo"><img src="img5/1.jpg" /><span>×</span></div></a>
<a href="#pic20"><div id="pic2" class="photo"><img src="img5/2.jpg" /><span>×</span></div></a>
<a href="#pic20"><div id="pic3" class="photo"><img src="img5/3.jpg" /><span>×</span></div></a>
<a href="#pic20"><div id="pic4" class="photo"><img src="img5/4.jpg" /><span>×</span></div></a>
<a href="#pic20"><div id="pic5" class="photo"><img src="img5/5.jpg" /><span>×</span></div></a>
<a href="#pic20"><div id="pic6" class="photo"><img src="img5/6.jpg" /><span>×</span></div></a>
<a href="#pic20"><div id="pic7" class="photo"><img src="img5/7.jpg" /><span>×</span></div></a>
<a href="#pic20"><div id="pic8" class="photo"><img src="img5/8.jpg" /><span>×</span></div></a>
<a href="#pic20"><div id="pic9" class="photo"><img src="img5/9.jpg" /><span>×</span></div></a>
<a href="#pic20"><div id="pic10" class="photo"><img src="img5/10.jpg" /><span>×</span></div></a>
<a href="#pic20"><div id="pic11" class="photo"><img src="img5/11.jpg" /><span>×</span></div></a>
<a href="#pic20"><div id="pic12" class="photo"><img src="img5/12.jpg" /><span>×</span></div></a>
<a href="#pic20"><div id="pic13" class="photo"><img src="img5/13.jpg" /><span>×</span></div></a>
<a href="#pic20"><div id="pic14" class="photo"><img src="img5/14.jpg" /><span>×</span></div></a>
<a href="#pic20"><div id="pic15" class="photo"><img src="img5/15.jpg" /><span>×</span></div></a>
</div>
</div>
CSS
#stage {
background-color: #787878;
max-width: 700px;
height: 350px;
padding-left:10px;
position: relative;
margin:0 auto;
}
/* 両側のサムネイル */
.pic {
border: #fff 2px solid;
float: left;
width:48%;
}
/* 中央のサムネイル */
.picc {
border: #fff 2px solid;
width:96%;
}
.pic:hover, .picc:hover {
border-color: red;
cursor: pointer;
}
.pic img,.picc img { width:100%; }
/* 各行 */
.row1, .row2, .row3 {
clear: left;
}
/* 左2列、中央、右2列 */
#leftpart, #centerpart, #rightpart {
float: left;
margin-top: 45px;
}
#leftpart {width:41%;
transform: perspective(700px) rotateY(24deg) translateZ(25px);
margin-right: -2%;
}
#centerpart {width:20.5%;
transform: perspective(700px) rotateY(0deg) translateZ(-38px);
}
#rightpart {width:41%;
transform: perspective(700px) rotateY(-24deg) translateZ(25px);
margin-left: -2%;
}
/* 全拡大写真格納枠 */
#frame { width:100%; }
/* 写真枠 */
.photo {
position: absolute;
width:100%;height:100%;background:rgba(0,0,0,0.6);
margin-left:-10px;
z-index: -1;
opacity: 0;
transition: opacity 1s ease;
}
/* 写真 */
.photo img {
position:absolute;
top: 50%;
left: 50%;
width:80%;
transform: translateY(-50%) translateX(-50%);
border:#fff 3px solid;
}
/* 閉じる印(×) */
.photo span {
position:absolute;
top:3%;right:3%;
color:#fff;font-weight:bold;font-size:36px;
}
.photo:hover > span { color:#f00; }
/* クリックされた写真枠のイベント */
.photo:target {
opacity: 1;
z-index: 30;
}