cssだけでLight Box型フォトギャラリー

本サンプル表示用HTML

<div class="wrapper">
<div id="header"><span>Light Box型フォトギャラリー（FadeIn・Out型）</span></div>
<h4>サンプル</h4>
</div>
<div id="contnr">
    <ul>
      <li><a href="#p1"><div><img src="img7/s1.jpg"></div></a></li>
      <li><a href="#p2"><div><img src="img7/s2.jpg"></div></a></li>
      <li><a href="#p3"><div><img src="img7/s3.jpg"></div></a></li>
      <li><a href="#p4"><div><img src="img7/s4.jpg"></div></a></li>
      <li><a href="#p5"><div><img src="img7/s5.jpg"></div></a></li>
      <li><a href="#p6"><div><img src="img7/s6.jpg"></div></a></li>
      <li><a href="#p7"><div><img src="img7/s7.jpg"></div></a></li>
      <li><a href="#p8"><div><img src="img7/s8.jpg"></div></a></li>
      <li><a href="#p9"><div><img src="img7/s9.jpg"></div></a></li>
      <li><a href="#p10"><div><img src="img7/s10.jpg"></div></a></li>
    </ul>
  </div>
<div style="clear:left;"></div>
<div id="p1" class="photo">
  <a href="#p11"><div class="dark"></div></a>
  <div class="frame">
    <img src="img7/1.jpg">
    <a href="#p2"><div class="cover_right"><span class="btn2"><img src="images/next.gif"></span></div></a>
    <a href="#p10"><div class="cover_left"><span class="btn3"><img src="images/prev.gif"></span></div></a>
    <span class="btn1"><a href="#p11"><img src="images/end.gif"></a></span>  　　　　
  </div>
</div>
<div id="p2" class="photo">
  <a href="#p11"><div class="dark"></div></a>
  <div class="frame">
    <img src="img7/2.jpg">
    <a href="#p3"><div class="cover_right"><span class="btn2"><img src="images/next.gif"></span></div></a>
    <a href="#p1"><div class="cover_left"><span class="btn3"><img src="images/prev.gif"></span></div></a>
    <span class="btn1"><a href="#p11"><img src="images/end.gif"></a></span>  　　　　
  </div>
</div>
<div id="p3" class="photo">
  <a href="#p11"><div class="dark"></div></a>
  <div class="frame">
    <img src="img7/3.jpg">
    <a href="#p4"><div class="cover_right"><span class="btn2"><img src="images/next.gif"></span></div></a>
    <a href="#p2"><div class="cover_left"><span class="btn3"><img src="images/prev.gif"></span></div></a>
    <span class="btn1"><a href="#p11"><img src="images/end.gif"></a></span>
   </div>
</div>
<div id="p4" class="photo">
  <a href="#p11"><div class="dark"></div></a>
  <div class="frame">
    <img src="img7/4.jpg">
    <a href="#p5"><div class="cover_right"><span class="btn2"><img src="images/next.gif"></span></div></a>
    <a href="#p3"><div class="cover_left"><span class="btn3"><img src="images/prev.gif"></span></div></a>
    <span class="btn1"><a href="#p11"><img src="images/end.gif"></a></span>
  </div>
</div>
<div id="p5" class="photo">
  <a href="#p11"><div class="dark"></div></a>
  <div class="frame">
    <img src="img7/5.jpg">
    <a href="#p6"><div class="cover_right"><span class="btn2"><img src="images/next.gif"></span></div></a>
    <a href="#p4"><div class="cover_left"><span class="btn3"><img src="images/prev.gif"></span></div></a>
    <span class="btn1"><a href="#p11"><img src="images/end.gif"></a></span>
  </div>
</div>
<div id="p6" class="photo">
  <a href="#p11"><div class="dark"></div></a>
  <div class="frame">
    <img src="img7/6.jpg">
    <a href="#p7"><div class="cover_right"><span class="btn2"><img src="images/next.gif"></span></div></a>
    <a href="#p5"><div class="cover_left"><span class="btn3"><img src="images/prev.gif"></span></div></a>
    <span class="btn1"><a href="#p11"><img src="images/end.gif"></a></span>
  </div>
</div>
<div id="p7" class="photo">
  <a href="#p11"><div class="dark"></div></a>
  <div class="frame">
    <img src="img7/7.jpg">
    <a href="#p8"><div class="cover_right"><span class="btn2"><img src="images/next.gif"></span></div></a>
    <a href="#p6"><div class="cover_left"><span class="btn3"><img src="images/prev.gif"></span></div></a>
    <span class="btn1"><a href="#p11"><img src="images/end.gif"></a></span>
  </div>
</div>
<div id="p8" class="photo">
  <a href="#p11"><div class="dark"></div></a>
  <div class="frame">
    <img src="img7/8.jpg">
    <a href="#p9"><div class="cover_right"><span class="btn2"><img src="images/next.gif"></span></div></a>
    <a href="#p7"><div class="cover_left"><span class="btn3"><img src="images/prev.gif"></span></div></a>
    <span class="btn1"><a href="#p11"><img src="images/end.gif"></a></span>
  </div>
</div>
<div id="p9" class="photo">
  <a href="#p11"><div class="dark"></div></a>
  <div class="frame">
    <img src="img7/9.jpg">
    <a href="#p10"><div class="cover_right"><span class="btn2"><img src="images/next.gif"></span></div></a>
    <a href="#p8"><div class="cover_left"><span class="btn3"><img src="images/prev.gif"></span></div></a>
    <span class="btn1"><a href="#p11"><img src="images/end.gif"></a></span>
  </div>
</div>
<div id="p10" class="photo">
  <a href="#p11"><div class="dark"></div></a>
  <div class="frame">
    <img src="img7/10.jpg">
    <a href="#p1"><div class="cover_right"><span class="btn2"><img src="images/next.gif"></span></div></a>
    <a href="#p9"><div class="cover_left"><span class="btn3"><img src="images/prev.gif"></span></div></a>
    <span class="btn1"><a href="#p11"><img src="images/end.gif"></a></span>
  </div>
</div>

本サンプル表示用CSS

#contnr {
	position: relative;
	max-width: 780px;
	margin: 0 auto;
}
#contnr ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#contnr ul li div {
	width: 150px;
	height: 85px;
	float: left;
	margin: 3px;
	overflow: hidden;
}
#contnr ul li img {
	position: relative;
	width: 150px;
	height: 85px;
	border: none;
	transition: all ease 0.2s;
}
#contnr ul li img:hover {
	cursor: pointer;
	width: 250px;
	height: 141px;
	margin-top: -28px;
	margin-left: -50px;
}
.photo {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -100;
}
.photo img {
	width: 100%;
}
.dark {
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.6);
	opacity: 0;
}
.frame {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	opacity: 0;
	transition: opacity 1s ease;
}
.photo:target {
	z-index: 100;
}
.photo:target > .frame {
	opacity: 1;
}
.photo:target > a .dark {
	opacity: 1
}
.btn1 img {
	border: none;
	width: 30px;
	height: 30px;
	position: absolute;
	top: -1%;
	right: -1%;
}
.btn2 img {
	border: none;
	width: 40px;
	height: 40px;
	position: absolute;
	top: 45%;
	right: -1%;
}
.btn3 img {
	border: none;
	width: 40px;
	height: 40px;
	position: absolute;
	top: 45%;
	left: 2%;
}
.cover_left, .cover_right {
	width: 40%;
	height: 100%;
	z-index: 200;
	position: absolute;
	top: 3%;
	background: rgba(0,0,0,0);
	opacity: 0;
}
.cover_left {
	left: 0;
}
.cover_right {
	left: 58%;
}
.cover_left:hover, .cover_right:hover {
	opacity: 1;
}