From 3ba1ac26fbca904f581298c524ac7116648c5921 Mon Sep 17 00:00:00 2001 From: ccd0 Date: Sat, 7 Mar 2015 22:08:07 -0800 Subject: [PATCH] Hover preview for linked images on webpage. --- template.jst | 27 +++++++++++++++++++++++---- 1 file changed, 23 insertions(+), 4 deletions(-) diff --git a/template.jst b/template.jst index 852a9c487..208befc22 100644 --- a/template.jst +++ b/template.jst @@ -10,24 +10,43 @@ h1 { text-align: center; background-color: #eee; } -img { +img.screenshot { display: block; margin: auto; width: 640px; max-width: 100%; - height: auto; } @media (min-width: 1120px) { - img { + img.screenshot { float: right; margin-left: 8px; } } +img.hover { + display: none; +} +a:hover + img.hover { + display: block; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + max-width: 100%; + max-height: 100%; + pointer-events: none; + box-shadow: 5px 5px 20px rgba(0,0,0,0.4); +} -<%= content.replace('', '') %> +<%= + content + .replace('', '') + .replace(/(.*?<\/a>)/g, '$1') +%>