CSS Only Minimal Responsive Image Gallery lightbox – CSSBox


Author: TheLastProject
Views Total: 8,513 views
Official Page: Go to website
Last Update: September 2, 2020
License: MIT

Preview:

CSS Only Minimal Responsive Image Gallery lightbox – CSSBox

Description:

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">
    </span>
  </a>
  <a class="cssbox_close" href="#void"></a>
  <a class="cssbox_next" href="#image2">&gt;</a>
</div>
<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">
    </span>
  </a>
  <a class="cssbox_close" href="#void"></a>
  <a class="cssbox_prev" href="#image1">&lt;</a>
  <a class="cssbox_next" href="#image3">&gt;</a>
</div>
<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">
    </span>
  </a>
  <a class="cssbox_close" href="#void"></a>
  <a class="cssbox_prev" href="#image2">&lt;</a>
</div>

Changelog:

09/02/2020

  • increased default z-index values to 999999

03/04/2020

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

10/14/2019

  • Fixed issue where lightbox has a pointer cursor

12/18/2018

08/14/2018

  • Fixed Bootstrap compatibility

See also  Pure CSS/CSS3 Smooth Toggle Switch

Leave a Reply

Your email address will not be published. Required fields are marked *