CSS-Only Lightbox Gallery: Easy Image Showcase

This is a minimalist lightbox gallery built using only CSS/CSS3 and Font Awesome icons. It displays large images in a modal overlay when thumbnails are clicked.

Users can navigate between images using the next and previous buttons. In addition, the gallery also supports direct image access via URL hashes.

The lightbox gallery enhances image viewing on your websites without writing or embedding any JavaScript. It provides a clean, full-screen display for showcasing photos or artwork.

How to use it:

1. Load the latest Font Awesome iconic font into your HTML document. This provides the icons for the navigation and close buttons within the lightbox.

<link rel="stylesheet" href="/path/to/font-awesome/css/all.min.css">

2. Create the HTML structure for your lightbox gallery. Each thumbnail image needs an anchor link that points to the corresponding lightbox element using its ID (which will be a URL hash).

<div class="content">
  <ul>
    <li>
      <!-- Image 1 -->
      <a href="#captain-america">
        <img src="./img/thumbs/captainamerica.jpg" alt="Captain America">
        <div class="thumbs-name">
          <h2>Captain America</h2>
        </div>
      </a>
      <div id="captain-america" class="overlay">
        <div class="wrapper-content">
          <a href="#thor" class="previous">
            <i class="fa-solid fa-chevron-left"></i>
          </a>
          <img src="./img/full/captainamerica.jpg" alt="Captain America">
          <a href="#iron-man" class="next">
            <i class="fa-solid fa-chevron-right"></i>
          </a>
          <p>Captain America is a Marvel superhero <br> with superpowers and a shield.</p>
          <a href="#" class="close">
            <i class="fa-solid fa-x"></i>
          </a>
        </div>
      </div>
    </li>
    <!-- Image 1 -->
    <li>
      <a href="#iron-man">
        <img src="./img/thumbs/ironman.jpg" alt="Iron Man">
        <div class="thumbs-name">
          <h2>Iron Man</h2>
        </div>
      </a>
      <div id="iron-man" class="overlay">
        <div class="wrapper-content">
          <a href="#captain-america" class="previous">
            <i class="fa-solid fa-chevron-left"></i>
          </a>
          <img src="./img/full/ironman.jpg" alt="Iron Man">
          <a href="#hulk" class="next">
            <i class="fa-solid fa-chevron-right"></i>
          </a>
          <p>Iron Man is a Marvel superhero with <br> a powered suit of armor.</p>
          <a href="#" class="close">
            <i class="fa-solid fa-x"></i>
          </a>
        </div>
      </div>
    </li>
    <!-- More Images Here -->
  </ul>
</div>

3. The CSS provided below controls the appearance and behavior of the lightbox gallery.

The CSS code utilizes the :target pseudo-class to show and hide the lightbox. When a user clicks a thumbnail, the browser’s URL changes to include the ID of the linked lightbox element as a hash. The CSS then targets this element using :target, applying styles to make it visible and overlay the page content.

Animations and transitions are used to create smooth effects when opening and closing the lightbox and navigating between images. The transform property handles scaling, and opacity controls the fading effects.

.container .content ul li .overlay {
  width: 0;
  height: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: fixed;
  background: rgba(0, 0, 0, 0);
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.8s ease;
}
.container .content ul li .overlay:target {
  background: rgba(0, 0, 0, 0.7);
  width: auto;
  height: auto;
}
.container .content ul li .overlay .wrapper-content {
  transform: scale(0);
  height: 100vh;
  padding: 100px 0;
  position: relative;
  display: flex;
  flex-direction: column;
}
.container .content ul li .overlay:target .wrapper-content {
  transform: scale(1);
  display: flex;
  justify-content: center;
}
.container .content ul li .overlay .wrapper-content img {
  max-height: 100%;
  border: 2px solid white;
  border-radius: 7px;
  box-shadow: 3px 3px 10px  black;
}
.container .content ul li .overlay:target .wrapper-content img {
  animation: fadeInOut 0.8s ease;
}
.container .content ul li .overlay .wrapper-content .next {
  display: inline-block;
  position: absolute;
  width: auto;
  height: auto;
  border-radius: 0%;
  border: none;
  overflow: none;
  color: white;
  transform: scale(3);
  right: -20%;
  opacity: 0;
}
.container .content ul li .overlay .wrapper-content .previous {
  display: inline-block;
  position: absolute;
  width: auto;
  height: auto;
  border-radius: 0%;
  border: none;
  overflow: none;
  color: white;
  transform: scale(3);
  left: -20%;
  opacity: 0;
}
.container .content ul li .overlay:target .wrapper-content .previous, 
.container .content ul li .overlay:target .wrapper-content .next {
  animation: fade 0.8s ease 0.3s forwards;
}
.container .content ul li .overlay .wrapper-content p {
  position: absolute;
  left: 0;
  bottom: 7%;
  line-height: 1.5em;
  color: white;
  font-size: 1rem;
  font-weight: 100;
  opacity: 0;
  text-shadow: 2px 2px 1px black;
}
.container .content ul li .overlay:target .wrapper-content p {
  animation: slideUpFade 0.8s ease 0.3s forwards;
}
.container .content ul li .overlay .wrapper-content .close {
  transform: scale(1.5);
  display: inline-block;
  position: absolute;
  width: auto;
  height: auto;
  border: none;
  border-radius: 0%;
  color: white;
  padding: 0 10px 10px 10px;
  right: 0;
  bottom: 7%;
  opacity: 0;
}
.container .content ul li .overlay:target .wrapper-content .close {
  animation: slideUpFade 0.8s ease 0.3s forwards;
}
@keyframes fadeInOut {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes slideUpFade {
  0% {
    opacity: 0;
    bottom: -1%;
  }
  100% {
    opacity: 1;
    bottom: 7%;
  }
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}