resolve #36

Author: ChangJoo-Park

_layouts/post.html

@@ -58,3 +58,20 @@ <h4 class="post-title">{{ post.title }}</h4>
   </a>
 </div>
 {% endfor %} {% endif %}
+<div id="overlay"></div>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+<script type="text/javascript">
+  $overlay = $('#overlay');
+
+  $('img').click(function(){
+    $overlay.fadeTo(200, 1).css({
+      backgroundImage: 'url('+this.src+')',
+      backgroundSize: 'contain'
+    });
+  });
+  $overlay.click(function(){
+    $(this).stop().fadeTo(200,0,function(){
+      $(this).hide();
+    });
+  });
+</script>

_sass/_posts.scss

@@ -46,3 +46,19 @@
 .related-post-title {
   border-bottom: thin solid #f3f3f3;
 }
+
+#overlay{
+  display:none;
+  position:fixed;
+  top:0;
+  left: 0;
+  width:100%;
+  height:100%;
+  background-color:rgba(0,0,0,0.4);
+  background-repeat:no-repeat;
+  background-position: center center;
+  cursor:pointer;
+}
+.post-content img {
+  cursor: pointer;
+}