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;
}
/* 左２列、中央、右２列 */
#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;
}