CSS Only Minimal Responsive Image Gallery lightbox – CSSBox

Category: CSS & CSS3 , Gallery , Recommended | September 2, 2020
Views Total:10,843 views
Official Page:Go to website
Last Update:September 2, 2020


CSS Only Minimal Responsive Image Gallery lightbox – CSSBox


A minimal, responsive image gallery lightbox where the user is able to navigate between full sized images in a fullscreen lightbox popup. Built using CSS / CSS3 and plain html markup.

How to use it:

To get started, just include the CSSBox.css in your html page.

<link href="cssbox.css" rel="stylesheet">

And then insert thumbnail and full images into the webpage as follows. That’s it.

<div class="cssbox">
  <a id="image1" href="#image1">
    <img class="cssbox_thumb" src="thumbn-1.jpg">
    <span class="cssbox_full">
      <img src="full-1.jpg">
  <a class="cssbox_close" href="#void"></a>
  <a class="cssbox_next" href="#image2">&gt;</a>
<div class="cssbox">
  <a id="image1" href="#image2">
    <img class="cssbox_thumb" src="thumbn-2.jpg">
    <span class="cssbox_full">
      <img src="full-2.jpg">
  <a class="cssbox_close" href="#void"></a>
  <a class="cssbox_prev" href="#image1">&lt;</a>
  <a class="cssbox_next" href="#image3">&gt;</a>
<div class="cssbox">
  <a id="image1" href="#image3">
    <img class="cssbox_thumb" src="thumbn-3.jpg">
    <span class="cssbox_full">
      <img src="full-3.jpg">
  <a class="cssbox_close" href="#void"></a>
  <a class="cssbox_prev" href="#image2">&lt;</a>



  • increased default z-index values to 999999


  • Added `:target` selector for CSSBox to be used as a lightbox style menu


  • Fixed issue where lightbox has a pointer cursor


  • Fixed CSS


  • Fixed Bootstrap compatibility

You Might Be Interested In:

5 thoughts on “CSS Only Minimal Responsive Image Gallery lightbox – CSSBox

  1. Crimmson

    I’m not very experienced with coding, but I’m putting together a personal portfolio website, and I am having trouble getting this working properly.

    All the thumbnails display properly, however, only my first image is showing its full-size version. The remainder just show the index page, although I can see the address changing (index.html#image2, #3, #4, etc etc).

    Including a screenshot of a section of the code. What stupidly obvious thing am I missing?


  2. pardeep sehgal

    There is still error in the code image id would be change to further to id=”image2″ and id=”image3″ according to the href=”#image2″ and href=”#image3″. Please update.

    Pardeep Sehgal

  3. Ko Karman

    A nice image gallery but there is still an error in the code of the explanation!

    the links should be coded like this…


  4. Graham

    I have added some JS to enable users to use the left and right arrow keys and Esc. Others might find it helpful.

    // support for Esc, ← and →

    function trigger(element, action) {
    var link = element.parentNode.querySelector(“.cssbox_” + action)
    if (link)

    document.addEventListener(“keyup”, function(e) {
    switch (e.key) {
    case “Escape”:
    return trigger(e.target, “close”);
    case “ArrowLeft”:
    return trigger(e.target, “prev”);
    case “ArrowRight”:
    return trigger(e.target, “next”);


Leave a Reply