CSS Only Lightbox with buttons

css-only-lightbox-with-buttons.markdown

CSS Only Lightbox with buttons

This is a lightbox with previous, next, and exit buttons made using CSS. This pen takes advantage of the CSS :target selector. Animation can be added, but for the sake of this pen, I have not implemented it.

A Pen by Stan Williams on CodePen.

License.

index.html

<div class='filter'>
  <h1>
  Pure CSS Sliding Lightbox
</h1>
  <p>
    This project takes advantage of the ':target' selector in CSS; and, using a bit of markup and CSS you already know, creates a lightbox effect with 2 arrows and an exit button.
  </p>
  <div id="thumblist">
    <p>
      click an image to make it bigger!
    </p>
    <a href="#image1">
      <!--what the user sees before clicking anything-->
      <img src="https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/cat-adult-landing-hero.ashx" class="thumb" />
    </a>
    <div id="image1" class="lightbox">
      <!--what the user sees after clicking the first image-->
      <a href="#_">
        <!--no need for a left arrow because there is no previous image to go to-->
        <img src="https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/cat-adult-landing-hero.ashx" />
        <!--this is the actual image that 'grows'-->
      </a>
      <a href="#_" class='exit'>
        <!--this href takes out out of full screen. -->
        &times;
        <!--exit button-->
      </a>
      <a href="#image2" class='next'>
        <!--this href leads you to the next image in the slideshow-->
        &gt;
        <!--next button-->
      </a>
    </div>
    <a href="#image2">
      <!--this href leads you to the previous image-->
      <img src="https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/cat-adult-landing-hero.ashx" class="thumb" />
      <!--left arrow button-->
    </a>
    <div id="image2" class="lightbox">
      <!--from here on out, the same comments apply. Notice that the href for the previous selector is set to the id of the lightbox div for the previous image, opposite goes for the next selector. This is what makes the slider work. There are some that use CSS and huge margins, but I prefer to keep my markup and css simple enough to explain. Hope you can use this!-->
      <a href="#image1" class='previous'>
        &lt;
      </a>
      <a href="#_">
        <img src="https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/cat-adult-landing-hero.ashx" />
      </a>
      <a href="#_" class='exit'>
        &times;
      </a>
      <a href="#image3" class='next'>
        &gt;
      </a>
    </div>
    <a href="#image3">
      <img src="https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/cat-adult-landing-hero.ashx" class="thumb" />
    </a>
    <div id="image3" class="lightbox">
      <a href="#image2" class='previous'>
        &lt;
      </a>
      <a href="#_">
        <img src="https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/cat-adult-landing-hero.ashx" />
        <p class="description">
          You can even add image descriptions.
        </p>
      </a>
      <a href="#_" class='exit'>
        &times;
      </a>
    </div>
  </div>
</div>

script.js

//no javascript! yay!

style.css

h1,
p {
  text-align: center;
  font-family: 'Verdana';
  width: 70%;
  margin: 0 auto;
  padding-top: 4px;
  padding-bottom: 4px;
}

.filter {
  background: rgba(0, 0, 0, .4);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.thumb {
  display: inline;
  height: 100px;
  padding-top: 10px;
}

#thumblist {
  text-align: center;
  border: 4px solid black;
  border-radius: 8px;
  padding: 0;
  background: rgba(127, 127, 127, .8);
}

#thumblist img {
  border-radius: 4px;
}

body {
  background: url(http://negativespace.co/wp-content/uploads/2015/03/xnegspace-00049-1300x866.jpg.pagespeed.ic.mCbGXkq4ck.webp) no-repeat center center fixed;
  color: #f0f0f0;
}

body a {
  color: #fff;
  text-decoration: none;
}

body a:hover {
  text-decoration: underline;
}

.description {
  color: white;
  text-decoration: none;
}
/** relevant CSS Below **/

.lightbox {
  display: none;
  /**sets the default display to hide the lightbox until it's the :target**/
  
  position: fixed;
  /**the rest of this styling makes the lightbox full screen when selected**/
  
  z-index: 999;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .8);
}

.lightbox img {
  /**sets the styling of the image in the lightbox**/
  
  max-width: 80%;
  max-height: 90%;
  text-align: center;
  margin-top: 2%;
}

.lightbox:target {
  /**this is where the magic happens. makes the lightbox display when it's the target of a clickable link**/
  
  outline: none;
  display: block;
}

.previous {
  /**styling the left arrow**/
  
  position: fixed;
  left: 4px;
  top: 40%;
  width: 40px;
  font-size: 40px;
  
}

.exit {
  /**styling the exit button**/
  
  position: fixed;
  top: 4px;
  right: 4px;
  width: 40px;
  font-size: 40px;
  
}

.next {
  /**styling the right arrow**/
  
  position: fixed;
  right: 4px;
  top: 40%;
  width: 40px;
  font-size: 40px;
  
}

Demo is Here: https://codepen.io/Stanssongs/full/JJLKEJ/
Fork it here: https://codepen.io/Stanssongs/pen/JJLKEJ