gallery page functionality implemented

components/GalleryImageViewer.vue

@@ -6,7 +6,7 @@
     </transition>
     <div class="image-container">
       <transition name="trans-bg-image">
-        <img v-if="showLoading !== null" class="image" :src="loadingImageUrl">
+        <img v-if="showLoading" class="image" :src="loadingImageUrl">
       </transition>
     </div>
     <div class="image-container">
@@ -133,13 +133,15 @@ export default {
 }
 
 .image {
+  position: absolute;
   width: auto;
   height: auto;
   max-height: 100%;
   max-width: 100%;
   margin: 0 auto;
   top: 50%;
-  transform: translateY(-50%);
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
 @media (max-width: $bp__layout) {
@@ -222,8 +224,12 @@ export default {
 }
 
 .trans-image {
-  &-enter-active, &-leave-active {
-    transition: opacity 1s;
+  &-enter-active {
+    transition: opacity 1s .4s;
+  }
+
+  &-leave-active {
+    transition: opacity .5s;
   }
 
   &-enter, &-leave-to {