(legible) captions on images

The previous post gives a method to overlay text atop an image, and though any color can be used, the text may not stand out clearly enough from the background. It's possible to specify a background for the text, but it lies behind the image so this approach doesn't work.

Instead, however, if the text is made a link, then the link's background color does show above the image and can be used to contrast with the text. Also, the background color can be made partially transparent so as not to completely block out the image. Strangely, any color specified for the link text itself seems to be ignored.

Notes:
The "href" in the anchor tag is needed to make it a link, and the empirically determined value "*" stops it from actually going anywhere when touched. (Otherwise it would have to point to some unique id). The padding and rounded corners are for aesthetics.

There is still visual feedback when the link is touched and this could be used, for example, to change the background or eliminate it altogether to better see the underlying image (as in the hover selector). Or perhaps better, just double tap the image to zoom and pan without the caption and then hit done to restore.

This works in iBooks and Marvin.

XHTML
<div class="container">
<img alt="" src="../Images/theimage.jpg" />
<p class="caption up"><a class="frame" href="*">the caption</a></p>
</div>

CSS
div.container {
 display: inline-block;
 width: 100%;
 text-align: center;
}
p.caption {
 font-size: .8em;
 font-style: italic;
 text-align: center;
}
p.up {
 margin-top: -2em;
 margin-bottom: 0;
}
a.frame.link {
 padding: 0em 2em;
 border-radius: 10px;
 text-decoration: none;
 background-color: rgba(255,255,255,0.75); /*white with transparency*/
}
a.frame:hover {
 text-decoration: none;
 background-color: transparent;
 visibility: hidden; /*zap entire caption */
}