complete.css

/* CSS Document */

h1 {
  text-align:center;
}

#gallery {
  margin: 100px auto;
  width:660px;
	}

#gallery a {
	text-decoration:none;
	}

#gallery .item {
	width: 200px; height: 200px; overflow: hidden;
	float: left;
	border: 5px solid #333;
	margin: 5px;
	}


#gallery .item a { 
    overflow: hidden;
	}

#gallery .item a img {height: 100%; align-self: center;
	}

/*************************************
 * Basic lightbox styles. Notice the
 * default 'display' is 'none'.
 */

.lightbox {
  /** Hide the lightbox */
  display: none;

  /** Apply basic lightbox styling */
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0;
  background: black;
  background: rgba(0,0,0,0.8);
}

.lightbox img {
  /** Pad the lightbox image */
  max-width: 90%;
  max-height: 80%;
  margin-top: 2%;
}

.lightbox:target {
  /** Show lightbox when it is target */
  display: block;

  /** Remove default browser outline style */
  outline: none;
}

.lightbox .image {
	max-width:80%;
	margin:0 auto;
	}

.lightbox .image img {
	border:15px #FFF solid;
	}

.lightbox .buttons {
	width: 220px;
	display: block;
	text-align: center;
	margin: 0 auto;
}	

.next,
.prev,
.close {
	padding:5px;
	background-color:#FFF;
	text-decoration:none;
  color:#333;
  font-family:arial;
	}

.close {
	margin-top: 3px;
}

.lightbox .prev {
	float:left;
	}
	
.lightbox .next {
	float:right;
	}	

complete.html

<h1> Pure CSS Lightbox </h1> 
  
<!-- Lightbox usage markup -->
<section id="gallery">
	<!-- thumbnail image wrapped in a link -->
    <section class="item">
        <a href="#img1">
          <img src="http://media-cache-ec0.pinimg.com/736x/d6/f3/ea/d6f3ea3207ced5d18138680bee59f535.jpg">
        </a>
    </section>
    <section class="item">
        <a href="#img2">
          <img src="http://media-cache-ec0.pinimg.com/736x/6b/69/f8/6b69f80d5cd5b735f88326ba534d0d85.jpg">
        </a>
    </section>
    <section class="item">
        <a href="#img3">
          <img src="http://media-cache-cd0.pinimg.com/736x/90/7a/50/907a50fbf359b9c559f332861a9a74e3.jpg">
        </a>
    </section>
</section>

<!-- lightbox container hidden with CSS -->
	<div class="lightbox" id="img1">
    	<div class="image">
        <img src="http://media-cache-ec0.pinimg.com/736x/d6/f3/ea/d6f3ea3207ced5d18138680bee59f535.jpg">
        <div class="buttons">
                <a href="#img3" class="prev">Prev</a>
                <a href="#" class="close">Close</a>
                <a href="#img2" class="next">Next</a>
        </div>
    </div>
</div>
	<div class="img lightbox" id="img2">
    	<div class="image">
            <img src="http://media-cache-ec0.pinimg.com/736x/6b/69/f8/6b69f80d5cd5b735f88326ba534d0d85.jpg">
            <div class="buttons">
                <a href="#img1" class="prev">Prev</a>
                <a href="#" class="close">Close</a>
                <a href="#img3" class="next">Next</a>
            </div>
        </div>
    </div>
	<div class="img lightbox" id="img3">
    	<div class="image">
            <img src="http://media-cache-cd0.pinimg.com/736x/90/7a/50/907a50fbf359b9c559f332861a9a74e3.jpg">
            <div class="buttons">
                <a href="#img2" class="prev">Prev</a>
                <a href="#" class="close">Close</a>
                <a href="#img1" class="next">Next</a>
            </div>
        </div>
    </div>

Gallery.html

<!-- thumbnail image wrapped in a link -->
<a href="#img1">
  <img width="200" height="200" src="img/img1.jpg">
</a>
<a href="#img2">
  <img width="200" height="200" src="img/img2.jpg">
</a>
<a href="#img3">
  <img width="200" height="200" src="img/img3.jpg">
</a>

lightbox.html

<!-- lightbox container hidden with CSS -->
<a href="#" class="lightbox" id="img1">
  <img src="img/img1.jpg">
</a>
<a href="#" class="lightbox" id="img2">
  <img src="img/img2.jpg">
</a>
<a href="#" class="lightbox" id="img3">
  <img src="img/img3.jpg">
</a>

lightbox2.html

<!-- before -->
<a href="#" class="lightbox" id="img1">
  <img src="img/img1.jpg">
</a>


<!-- after -->

<div class="lightbox" id="img1">
    <div class="image">
      <img src="http://media-cache-ec0.pinimg.com/736x/d6/f3/ea/d6f3ea3207ced5d18138680bee59f535.jpg">
      <div class="buttons">
        <a href="#img3" class="prev">Prev</a>
        <a href="#" class="close">Close</a>
        <a href="#img2" class="next">Next</a>
      </div>
    </div>
</div>

style.css

<!-- 
 * Basic lightbox styles. Notice the
 * default 'display' is 'none'.
-->

.lightbox {
  /** Hide the lightbox */
  display: none;

  /** Apply basic lightbox styling */
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0;
  background: black;
  background: rgba(0,0,0,0.8);
}

.lightbox img {
  /** Pad the lightbox image */
  max-width: 90%;
  max-height: 80%;
  margin-top: 2%;
}

.lightbox:target {
  /** Show lightbox when it is target */
  display: block;

  /** Remove default browser outline style */
  outline: none;
}

style2.css

/*************************************
 * Basic lightbox styles. Notice the
 * default 'display' is 'none'.
 */

.lightbox {
  /** Hide the lightbox */
  display: none;

  /** Apply basic lightbox styling */
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0;
  background: black;
  background: rgba(0,0,0,0.8);
}

.lightbox img {
  /** Pad the lightbox image */
  max-width: 90%;
  max-height: 80%;
  margin-top: 2%;
}

.lightbox:target {
  /** Show lightbox when it is target */
  display: block;

  /** Remove default browser outline style */
  outline: none;
}

.lightbox .image {
	max-width:80%;
	margin:0 auto;
	}

.lightbox .image img {
	border:15px #FFF solid;
	}

.lightbox .buttons {
	width: 220px;
	display: block;
	text-align: center;
	margin: 0 auto;
}	

.next,
.prev,
.close {
	padding:5px;
	background-color:#FFF;
	text-decoration:none;
  color:#333;
  font-family:arial;
	}

.close {
	margin-top: 3px;
}

.lightbox .prev {
	float:left;
	}
	
.lightbox .next {
	float:right;
	}