add preview placeholder

public/stylesheets/style.css

@@ -108,7 +108,7 @@ h4 {
   height: 220px;
 }
 
-.code .example-wrapper .preview {
+.code .example-wrapper .preview, .code .preview-placeholder {
   display: none;
   width: 100%;
   position: absolute;
@@ -122,6 +122,19 @@ h4 {
   color: #666;
 }
 
+.code .preview-placeholder {
+  display: block;
+}
+
+.code .preview-placeholder:hover {
+  /* fixes glitchy blinking */
+  display: block !important;
+}
+
+.code:hover .preview-placeholder {
+  display: none;
+}
+
 .code .example-wrapper .preview i {
   color: #aaa;
 }

views/index.jade

@@ -101,6 +101,8 @@ block content
                 .example #{domain}/avatars/jeb_?default=https://i.imgur.com/ocJVWAc.png
                 p.preview
                   | Jeb's avatar, or fall back to a custom image <i>(this example assumes jeb_ does not exist)</i>
+              p.preview-placeholder
+                | Hover one the examples for a preview!
             .preview-background
 
 
@@ -157,6 +159,8 @@ block content
               #render-example-2.example-wrapper
                 .example #{domain}/renders/head/853c80ef3c3749fdaa49938b674adae6?scale=8
                 p.preview Jeb's head, by UUID, scale 8
+              p.preview-placeholder
+                | Hover one the examples for a preview!
             .preview-background
 
 
@@ -212,6 +216,8 @@ block content
               #skin-example-2.example-wrapper
                 .example #{domain}/skins/jeb_?default=alex
                 p.preview Jeb's skin, or fall back to alex <i>(this example assumes jeb_ does not exist)</i>
+              p.preview-placeholder
+                | Hover one the examples for a preview!
             .preview-background