Pure CSS Image Gallery Lightbox – Octo

Octo is a pure CSS/CSS3 solution to enlarge and display grouped images in a lightbox with next/prev arrows navigation.

How to use it:

Load the octo.css in the head section of your web page.

<link href="css/octo.css" rel="stylesheet">

Add a group of images in your html page.

<div id="thumblist">
    
  <a href="#image1"> 
    <img src="thumb-1" class="thumb"/>
  </a>
    
    
  <div id="image1" class="lightbox"> 
      
    <a href="#_"> 
      <img src="thumb-1" />
       
    </a>
      
    <a href="#_">
      <img src="close.png" class="exit"/><!--exit button-->
    </a>
      
    <a href="#image2">
      <img src="right.png" class="next"/><!--next button-->
    </a>
      
  </div>
    
  <a href="#image2">
    <img src="2.jpg" class="thumb" /><!--left arrow button-->
  </a>
    
  <div id="image2" class="lightbox">
  
    <a href="#image1">
      <img src="left.png" class="previous"/>
    </a>
      
    <a href="#_">
      <img src="2.jpg" />
    </a>
      
    <a href="#_">
      <img src="close.png" class="exit"/>
    </a>
      
    <a href="#image3">
      <img src="right.png" class="next"/>
    </a>
      
  </div>
    
  <a href="#image3">
    <img src="3.jpg" class="thumb" />
  </a>
    
  <div id="image3" class="lightbox">
      
    <a href="#image2">
      <img src="left.png" class="previous"/>
    </a>
      
    <a href="#_">
      <img src="3.jpg" />
      <p class="description">
        You can even add image descriptions.
      </p>
    </a>
      
    <a href="#_">
      <img src="close.png" class="exit"/>
    </a>
      
  </div>
</div>