Implemented mouseover descriptions for thumbnail representations of demos

src/jade/mixins/thumbnail.jade

@@ -9,7 +9,7 @@ mixin thumbnail(ex)
         a(href="#{ex.path}")
             img(src="#{ex.path}/thumbnail.png")
             .caption
-                h3 #{ex.title}
+                h3.title #{ex.title}
                 if ex.about
                     .description
                         p #{ex.about}

src/js/index.js

@@ -5,7 +5,12 @@ $(function () {
     "use strict";
 
     $.getJSON("data/examples.json", function (examples) {
-        var rows = [];
+        var rows = [],
+            fadeIn,
+            fadeOut;
+
+        // Partition the example specs into groups of four (preserving their
+        // order).
         _.each(examples, function (ex, i) {
             var index = parseInt(i / 4);
 
@@ -14,8 +19,27 @@ $(function () {
             rows[index].push(ex);
         });
 
+        // Use the examples template (which defers to thumbnailRow and then
+        // thumbnail jade mixins) to render the thumbnails.
         $("#examples").html(template.examples({
             rows: rows
         }));
+
+        // Set up a function to fade in the description on mouseover.
+        fadeIn = function () {
+            $(this)
+                .find(".caption .description")
+                .fadeIn(250);
+        };
+
+        // Set up the inverse function to fade the description out on mouseout.
+        fadeOut = function () {
+            $(this)
+                .find(".caption .description")
+                .fadeOut(250);
+        };
+
+        // Set up the hover actions.
+        $(".thumbnail").hover(fadeIn, fadeOut);
     });
 });

src/static/data/examples.json

-[
-    {
-        "title": "Foobar",
-        "path": "examples/foobar",
-        "about": "Foo your bars"
-    },
-
-    {
-        "title": "Widget",
-        "path": "examples/widget"
-    }
-]
+[]

src/stylus/index.styl

@@ -10,3 +10,18 @@
 .pager li > a.orange:hover
 .pager li > a.orange:focus
     background-color chocolate
+
+.thumbnail .caption .description
+    position absolute
+    top 5px
+    left 20px
+    background rgba(50, 50, 50, 0.8)
+    width 252.5px
+    padding 2%
+    display none
+    color white
+    z-index 2
+    border-radius 3px
+
+.thumbnail .caption h3.title
+    text-align center