Add overlay and newsletter thumbnail preview

assets/css/src/box.styl

@@ -19,16 +19,28 @@
   margin-right: 15px
   float: left
   overflow: hidden
+  position: relative
 
   img
     min-width: 150px
     min-height: 150px
-    height: 100%
+    height: auto
-    width: auto
+    width: 110%
     position: relative
-    top: 50%
+    top: 0
     left: 50%
-    transform: translate(-50%, -50%)
+    transform: translate(-50%, 0%)
+
+  .mailpoet_overlay
+    position: absolute
+    top: 0
+    left: 0
+    right: 0
+    bottom: 0
+    background-color: rgba(255, 255, 255, 0.0)
+
+    &:hover
+      background-color: rgba(255, 255, 255, 0.7)
 
 .mailpoet_boxes .mailpoet_description
   float:left

assets/js/src/newsletters/templates.jsx

@@ -150,6 +150,13 @@ define(
            this.setState({ loading: false });
         }
       },
+      handleShowTemplate: function(template) {
+        MailPoet.Modal.popup({
+          title: template.name,
+          template: '<img src="{{ thumbnail }}" />',
+          data: template,
+        });
+      },
       handleTemplateImport: function() {
         this.getTemplates();
       },
@@ -169,7 +176,10 @@ define(
           if (typeof template.thumbnail === 'string'
               && template.thumbnail.length > 0) {
             thumbnail = (
-              <img src={ template.thumbnail } />
+              <a href="javascript:;" onClick={this.handleShowTemplate.bind(null, template)}>
+                <img src={ template.thumbnail } />
+                <div className="mailpoet_overlay"></div>
+              </a>
             );
           }