In this pen I'm trying to display an image caption on top of its image when it's hovered (centered horizontally and vertically). I do not want any unnecessary markup (otherwise there would have been solutions using "display: table-cell") nor any pixel based calculations.
I'm not finally happy with the current solution since the negative "margin-top" being half the line-height does not seem totally uncalculated, but I can live with it for now.
And there might be better ways for dealing with the image border; it's not really beautiful depending on the overall image brightness and its size.
Uses the border-image property to frame an image in a somehow photo-realistic way. Additionally, a "handwritten" caption can be applied.
There are some pixel based calculations in here, which is not ideal. And, of course: IE. But whatever.
The jQuery part is not really neccessary; it simply helps to keep the HTML part a little cleaner. Of course, you can remove it and some of the CSS if you don't want captions at all.