Pure CSS Image Lightboxes

Four different CSS-only image lightboxes, not using any JavaScript.

by Emmanuel Garcia

HTML

<h2>Lightbox #3: Half-animated, lazy-loads big images</h2>

<div class="lightbox v3" tabindex="0">
  <img src="https://unsplash.it/160/120?image=76" width="160" height="120" alt="" />
  <div tabindex="0"><span style="background-image: url(https://unsplash.it/1024/768?image=76)"></span></div>
</div>

SCSS

/* Please note, this is not how I would write the CSS if I was just using 1 lightbox. This is for this specific unlikely scenario where 4 different lightboxes are used together. When using in production I would copy just one CSS section, remove the 'v[1-4]' class and change all `@extend %placeholder` for the real code */

%overlay {
  display: none;
  content: "";
  background-color: rgba(0, 0, 0, .5);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
%loading-icon {
  display: none;
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  z-index: 0;
  /* timer icon from https://materialdesignicons.com/icon/timer-sand (SIL Open Font License 1.1) */
  background: #333 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAABIAAAASABGyWs+AAAACXZwQWcAAAAwAAAAMADO7oxXAAAA2ElEQVRo3u2ZQQ4CIRAEwT/ynuXhm7QnDyIwIMjMxK7zhK2KsBoMgZD/JkoDAKAqGGPX8aEptwMGaCOegZLyTEh79Nfruf8EGKANA7TZHgAgo03WDg4VqTQYkStzqRw6EXAXz7wHIlryH2udCEiTEcPytTXUI8zJr4iYkf9GyJy8JFaZsyffi6jM2JRvRXQCtsq7/ymxBddbyPUhdv0adf1FtiKiHjG5bS4Al6mISfkXwxEnAkokeSnijeMBg/K9iKWA5Zu53fBmzhsM0MZ9AP8j04YBhBBdnpcx5ojPA/ruAAAAAElFTkSuQmCC) no-repeat center;
}
%positioning {
  position: fixed;
  top: 1em;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
%close-icon {
  content: "\00d7"; /* multiply sign */
  display: block;
  color: #fff;
  background-color: #000;
  position: absolute;
  top: 0;
  right: 1em;
  font-size: 2em;
  border-radius: 50%;
  font-weight: bold;
  line-height: 2;
  min-width: 2em;
  min-height: 2em;
  vertical-align: middle;
  text-align: center;
}
%bg-img {
  background: center / contain no-repeat;
  width: 100%;
  height: 100%;
}
%hide {
  display: none;
}
%show {
  display: block;
}
%hide-animatable {
  opacity: 0;
  transition: opacity .5s, max-width .5s;
  max-width: 0;
  max-height: 100%;
}
%show-animatable {
  opacity: 1;
  max-width: 100%;
}

/* additional...