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