diff --git a/sass/_lightbox.scss b/sass/_lightbox.scss
new file mode 100644
index 0000000..c3dbf61
--- /dev/null
+++ b/sass/_lightbox.scss
@@ -0,0 +1,45 @@
+.lightbox {
+ display: none;
+
+ position: fixed;
+ z-index: 999;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ padding: 1em 0;
+
+ background: rgba(0, 0, 0, 0.8);
+ cursor: pointer;
+
+ &.visible {
+ display: block;
+ animation: fade-in .3s ease-out;
+
+ div { animation: zoom-in .2s ease-out }
+ }
+
+ div {
+ display: block;
+ width: 100%;
+ height: 100%;
+ max-width: 1500px;
+ margin: 0 auto;
+
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: contain;
+ }
+}
+
+// Keyframes have to be used, because transition
+// does not work with `display: none`
+@keyframes fade-in {
+ 0% { display: none; opacity: 0 }
+ 1% { display: block; opacity: 0 }
+ 100% { display: block; opacity: 1 }
+}
+@keyframes zoom-in {
+ 0% { transform: scale(.5) }
+ 100% { transform: scale(1) }
+}
diff --git a/sass/style.scss b/sass/style.scss
index d4dfbf1..3b68ae7 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -5,6 +5,7 @@
@import "tags";
@import "tables";
@import "fonts";
+@import "lightbox";
*, *:before, *:after {
@@ -68,6 +69,7 @@ main {
margin:0 auto 2em auto;
border-radius:5px;
border:1px solid $border;
+ cursor: pointer;
}
h2 { margin: 0.85em 0 }
diff --git a/templates/macros.html b/templates/macros.html
index a33f3dd..f880b52 100644
--- a/templates/macros.html
+++ b/templates/macros.html
@@ -71,7 +71,8 @@
{% for asset in page.assets %}
{% if asset is matching("[img.](jpg|png)$") %}
{% set image = resize_image(path=asset, width=900, height=400, op="fill") %}
-
+
+