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);
+}
 </style>
 <link rel="icon" href="src/General/img/icon.gif">
 <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/ohnjgmpcibpbafdlkimncjhflgedgpam">
 </head><body>
-<%= content.replace('</h1>', '</h1><a href="img/screenshot.png"><img src="img/screenshot.png"></a>') %>
+<%=
+  content
+    .replace('</h1>', '</h1><a href="img/screenshot.png"><img class="screenshot" src="img/screenshot.png"></a>')
+    .replace(/(<a href="([^"]+\.png)">.*?<\/a>)/g, '$1<img class="hover" src="$2">')
+%>
 <script>
 var links = document.querySelectorAll('a[href="https://chrome.google.com/webstore/detail/4chan-x/ohnjgmpcibpbafdlkimncjhflgedgpam"]');
 for (var i = 0; i < links.length; i++) {
