CSS3制作Lightbox效果

Lightbox效果以往都是依靠jQuery插件或者别的JavaScript脚本来实现，今天开始为大家提供几个纯CSS3制作的Lightbox效果。今天这个Lightbox效果使用的是input[type=radio]配合CSS3的相邻兄弟元素选择器(E + F)来实现，这种制作方法最关键的地方是结构的配合，以及label的for属性与元素的id属性配合一致，并且运用了display:table属性实现弹出层的图片居中效果。详细的请看下面的代码。

demodownload

HTML结构

<ul class="lightbox">
  <li>
    <label for="lightbox01"><img src="1s.jpg" alt=""></label>
    <input type="radio" id="lightbox01" name="gallery">
    <div class="overlay">
      <label for="close" title="Close lightbox"><img src="1.jpg" alt=""></label>
    </div>
  </li>
  <li>
    <label for="lightbox02"><img src="2s.jpg" alt=""></label>
    <input type="radio" id="lightbox02" name="gallery">
    <div class="overlay">
      <label for="close" title="Close lightbox"><img src="2.jpg" alt=""></label>
    </div>
  </li>
  <li>
    <label for="lightbox03"><img src="3s.jpg" alt=""></label>
    <input type="radio" id="lightbox03" name="gallery">
    <div class="overlay">
      <label for="close" title="Close lightbox"><img src="3.jpg" alt=""></label>
    </div>
  </li>
  <li>
    <label for="lightbox04"><img src="4s.jpg" alt=""></label>
    <input type="radio" id="lightbox04" name="gallery">
    <div class="overlay">
      <label for="close" title="Close lightbox"><img src="4.jpg" alt=""></label>
    </div>
  </li>
  <li>
    <label for="lightbox05"><img src="5s.jpg"  alt=""></label>
    <input type="radio" id="lightbox05" name="gallery">
    <div class="overlay">
      <label for="close" title="Close lightbox"><img src="5.jpg" alt=""></label>
    </div>
  </li>
</ul>
<input type="radio" id="close" name="gallery">

CSS代码：

body {
  background: url(black-bg.png) repeat 0 0;
}
.lightbox{
  text-align: center;
  margin:20px 0;
}
.lightbox li{
  display: inline-block;
  list-style: none;
  margin: 0 10px 0 0;
  border: 3px solid #ccc;
  border-radius: 3px;
}
.lightbox li:hover { 
  border: 3px solid #1E528C; 
}
	
ul li img, 
ul li label 	{ 
 display: block; 
 cursor: pointer; 
}
		
ul li input { 
  display: none; 
}
ul li input:checked + .overlay { 
  display: table; 
}

.overlay{
  width: 100%;
  height: 100%;
  position: absolute; 
  top: 0; 
  left: 0; 
  display: none; 
  z-index: 999;
  background: rgba(0,0,0,0.7);
}
.overlay label{
  display: table-cell; 
  vertical-align: middle; 
  text-align: center;
}
.overlay img		{
  display: inline;
  border: none;
  padding: 10px;
  border-radius: 10px;
  background: #ffffff;
}
#close {opacity: 0;}

demodownload

如需转载，烦请注明出处：https://www.fedev.cn/demo/css3-create-lightbox-effect-1.html

Prime Hype DF 2016 EP