diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index 344a6fb..4933232 100644
--- a/public/stylesheets/style.css
+++ b/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;
}
diff --git a/views/index.jade b/views/index.jade
index 1e0d161..9ed55f6 100644
--- a/views/index.jade
+++ b/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 (this example assumes jeb_ does not exist)
+ 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 (this example assumes jeb_ does not exist)
+ p.preview-placeholder
+ | Hover one the examples for a preview!
.preview-background