How this works:

By using the CSS pseudo-selector :target, one is able to have a CSS apply to only a specific element with the #id specified in the URL fragment (e.g. https://example.com/#select_this_id).

We can exploit this fact to our advantage by having the anchor tags for our images link to href="#image", which upon click will select on the div with the currently clicked on image.

There is an obvious pitfall with this approach, though. If we would like to insert a new image to the lightbox gallery rather than append to the end, we must re-enumerate all the div IDs starting from the index we inserted our new image (we can avoid doing this by simply changing the ID in the previous and next image divs, but then we’ll end up with an out-of-order list of IDs).

Link to Demo page.

Not going to sugar coat this, but I find the out-of-box style is really unappealing (but I understand this is a matter of taste). And the odd opacity change during transition between images is jarring (transition goes from current image -> see through to the page -> next image).

I would solve the latter problem by having the image nested within yet another div which keeps a consistent opacity throughout transitions, but of course that makes the markup a bit yucky…