Images with captions, lightboxes, and revealable-alt-text (HTML+CSS!)

[Dan Q]

Regulars will know that sometimes I get an idea in my head and can't shake it. A "can this be done with just semantic HTML and CSS?". Here's my latest example. I wanted a (responsive) web page with:

- images,
- that had captions,
- and alt text,
- and that alt-text could be made "visible" with a toggle, like Mastodon does it,
- and clicking the image would show a larger version with a "lightbox" overlay effect
- using no JavaScript
- and the key functionality has to work even if CSS gets disabled,
- and it should all be keyboard-accessible

Here's the image I had in my head (recorded from the finished page on the Everyone Site):

I hope the CSS code (all embedded in the page) is self-explanatory, in case it's any use to anybody else. I've tried to throw a couple of comments in. I haven't the time to turn this one into a full tutorial, I'm afraid.

[schlime9k]

Very elegant solution! Will def use this at some point on my site when I need to as this is just a good accessibility feature. Great work as per usual Dan <333

[pepper]

Dan I love you this is exactly what I've been planning on building for my gallery re-write!!! Semantic HTML and CSS is also my own priority, I don't have anything against JS but I would prefer my site to work without it being required, and my current gallery setup is very much not accessible.

I'm going to steal this for SURE 

[pepper]

Here's my latest example. I wanted a (responsive) web page with

   Dan I'm using this and modifying it slightly for use in my professional photography portfolio 

Do you want me to credit you in-line or anything? And is this code licensed like your site code is, as Creative Commons? I'll credit you in my About page as I do other code I use but I wasn't sure about the CC license on the stuff you've shared on Melonland as opposed to stuff you've shared on your own site 

[Dan Q]

Do you want me to credit you in-line or anything?

While in general almost everything original I release is CC-By-NC (i.e. free to use for non-commercial purposes, with a credit line)... I'm not convinced that anything I did here was transformative enough to be copyrightable!

So please consider it to be your choice of CC0/Public Domain: I waive any rights over it - do what you like! Credit (or don't!) if you feel like it; but do it because you want to rather than because anybody told you to!