diff --git a/components/GalleryImageViewer.vue b/components/GalleryImageViewer.vue
index c8fb1f4..20f3205 100644
--- a/components/GalleryImageViewer.vue
+++ b/components/GalleryImageViewer.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="image-viewer"
        :class="{ 'is-visible': isVisible }">
-    <transition name="trans-bg-image" mode="out-in">
-      <div v-if="backgroundImageUrl" :key="backgroundImageUrl" class="viewer-background" :style="backgroundStyle"></div>
+    <transition name="trans-bg-image">
+      <div v-if="backgroundImageUrl !== null" :key="backgroundImageUrl" class="viewer-background" :style="backgroundStyle"></div>
     </transition>
     <div class="image-container">
       <transition name="trans-bg-image">
-        <img v-if="showLoading" class="image" :src="loadingImageUrl">
+        <img v-if="showLoading !== null" class="image" :src="loadingImageUrl">
       </transition>
     </div>
     <div class="image-container">
       <transition name="trans-image" mode="out-in">
-        <img v-if="displayImageUrl" :key="displayImageUrl" class="image" :src="displayImageUrl">
+        <img v-if="displayImageUrl !== null" :key="displayImageUrl" class="image" :src="displayImageUrl">
       </transition>
     </div>
     <div class="close-viewer mobile-only"
@@ -223,7 +223,7 @@ export default {
 
 .trans-image {
   &-enter-active, &-leave-active {
-    transition: opacity .5s;
+    transition: opacity 1s;
   }
 
   &-enter, &-leave-to {
@@ -233,7 +233,7 @@ export default {
 
 .trans-bg-image {
   &-enter-active, &-leave-active {
-    transition: opacity .3s;
+    transition: opacity .8s;
   }
 
   &-enter, &-leave-to {