Question

What’s the simplest markup to display text upon clicking an image?

No toggling, CSS or Javascript. I have a series of thumbs that I would like put a caption to when clicked. I’ve been searching for hours for what seems to be so simple and I just don’t get it.

Answer 1

The following approach is rather simple, but it makes the image caption text visible only until something else is clicked on in the page so that a link is followed. (It’s not quite clear from the question whether this is OK.)

Make the image caption text initially invisible, using CSS. Make the image a link to its caption, and use the :target pseudo-class to turn the caption to visible when the link is clicked on. Demo: jsfiddle.

<style>
a img { border: none; }
.caption { visibility: hidden; }
.caption:target { visibility: visible; }
</style>
<a href=#capt1><img src=test1.png alt=foo></a>
<div class=caption id=capt1>Image caption text</div>
<a href=#capt2><img src=test2.png alt=foo></a>
<div class=caption id=capt2>Image caption text 2</div>

As a side effect, the page may move down a bit, due to clicking on a link. If this is a problem, you could use “self-pointing” links instead:

<a href=#capt1 id=capt1><img src=test1.png alt=foo><br>
<span class=caption>Image caption text</span></a>

and then you would modify the selector in the essential CSS rule:

:target .caption { visibility: visible; }

This works across browsers except IE 8 and older. They can be covered using polyfill, i.e. JavaScript code that emulates support to the pseudo-element in browsers without native support. See Polyfill for css :target, not(), and [tilde] sibling selectors?