From eb6069175c83ce41e8efb7733ea29171b308aa3c Mon Sep 17 00:00:00 2001
From: ManjaroOne666 <git@gabbaell.co.uk>
Date: Sun, 13 Jan 2019 10:35:38 +0000
Subject: [PATCH] update: image moved from background-image to image element

---
 components/GalleryImageViewer.vue | 30 ++++++++++++++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/components/GalleryImageViewer.vue b/components/GalleryImageViewer.vue
index c0663f2..1d87e65 100644
--- a/components/GalleryImageViewer.vue
+++ b/components/GalleryImageViewer.vue
@@ -1,9 +1,13 @@
 <template>
   <div class="image-viewer"
        :class="{ 'is-visible': isVisible }">
-    <div class="image-container"
+    <div class="viewer-background"
          :style="backgroundStyle">
     </div>
+    <div class="image-container">
+      <img class="image"
+           :src="imageUrl">
+    </div>
     <div class="close-viewer mobile-only"
          @click="$emit('close')">
       X
@@ -68,7 +72,7 @@ export default {
 
 <style lang="scss" scoped>
 .image-viewer {
-  background-color: blue;
+  background-color: #222;
 }
 
 .image-container {
@@ -77,6 +81,16 @@ export default {
   background-color: transparent;
 }
 
+.image {
+  width: auto;
+  height: auto;
+  max-height: 100%;
+  max-width: 100%;
+  margin: 0 auto;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
 @media (max-width: $bp__layout) {
   .close-viewer {
     position: absolute;
@@ -142,5 +156,17 @@ export default {
     bottom: 8px;
     background-position: top center;
   }
+
+  .viewer-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background-size: 100% 100%;
+    background-position: center center;
+    filter: blur(100px);
+    opacity: .3;
+  }
 }
 </style>