papatoob's public fiddles
-
Centered caption on top of image
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. The second approach needs some JavaScript to set the caption's line-height to the complete image height.
-
converTable: plugin demonstration
This is basically just a demo and test fiddle for my jQuery plugin "converTable", which converts tables into definition lists (for oversized tables only by default).
-
Photo realistic images
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.