JSFiddle

  • Centered caption on top of image #20 is the latest revision

    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.

    /*************************************
    * This script dynamically sets the 
    * caption's line-height to the height
    * of the preceding image. The other 
    * values could have ...
  • 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).

    $(document).ready(function () {
    /*************************************
    * To-Do: create data-title attributes
    * programmatically from header cells.
    *************************************/
      $('.convert').converTable({
        includeTermTitles:true,
        includeDefinitionTitles:true
      });
    });
  • Photo realistic images #6 is the latest revision

    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.

    /********************************************
    * This tiny jQuery snippet adds a specific 
    * class to the image if a caption is present. 
    ********************************************/
    $(document).ready(function () {
      $("figure ...