Lightboxes & Pseudo Elements

How can we better indicate a lightbox to a user?

A large number of visuals that I have to use in my day to day are product screen shots. Thumbnail versions of these are usually quite worthless so you usually have to resort to using some sort of lightbox plugin to display the image larger. Here's a quick little trick to tell the user that the image is a lightbox.

First, let's look at some basic markup from what you'd find with most lightbox plugins:

HTML

<a href="/path/to/image.jpg" class="lightbox">
  <img src="thumbnail.jpg">
</a>

If we can hook onto that lightbox class in CSS, we can use pseudo elements to signify to click to enlarge.

CSS

.lightbox {
  position: relative;
}

.lightbox:after {
  content: 'Click to Enlarge'; 
  position: absolute;
  left: 0;
  bottom: -1.5em;
}

This will give us linked text below our thumbnail image. You may ask why do it this way if I can just write a caption or something like that? The real power behind this trick is the ability to integrate icon fonts with it.

If we slightly tweak the CSS in our after pseudo element, and include a reference to a unicode character for a magnifying glass (I'll use Font Awesome's as an example), then we get a much nicer result.

CSS

.lightbox:after {
  content: '\f002 Click to Enlarge'; 
  font-family: 'FontAwesome', 'proxima nova', sans-serif;
  position: absolute;
  left: 0;
  bottom: -1.5em;
}

Specifying a fallback font that is inline with the rest of your font stack allows you to mix the icon font character along with regular text, however, you will run into issues if you use normal letters, numbers, or symbols to map your icon fonts.