diff --git a/app/assets/stylesheets/lightbox.css b/app/assets/stylesheets/lightbox.css
index 5dc10d7dc..ee4c1b2eb 100644
--- a/app/assets/stylesheets/lightbox.css
+++ b/app/assets/stylesheets/lightbox.css
@@ -1,8 +1,11 @@
 @layer components {
   .lightbox {
-    background-color: oklch(var(--lch-canvas) / 0.66);
+    --dialog-duration: 250ms;
+
+    background-color: transparent;
     block-size: 100dvh;
     border: 0;
+    display: grid;
     inline-size: 100dvw;
     inset: 0;
     margin: auto;
@@ -10,29 +13,34 @@
     max-width: unset;
     overflow: hidden;
     padding: var(--block-space-half) var(--inline-space);
+    place-items: center;
 
     &::backdrop {
-      -webkit-backdrop-filter: blur(66px);
-      backdrop-filter: blur(66px);
-      background-color: var(--color-ink);
+      -webkit-backdrop-filter: blur(16px);
+      backdrop-filter: blur(16px);
+      background-color: oklch(var(--lch-canvas) / 50%);
+    }
+
+    /* Default transition state */
+    &, &::backdrop, img {
       opacity: 0;
+      transition: var(--dialog-duration) allow-discrete;
+      transition-property: display, opacity, overlay, transform;
+    }
+
+    img {
+      transform: translateY(10dvh);
     }
 
     &[open] {
-      display: grid;
-      opacity: 1;
-      place-items: center;
-
-      &::backdrop {
-        opacity: 0.75;
+      &, &::backdrop, img {
+        opacity: 1;
+        transform: translateY(0);
       }
     }
 
     @starting-style {
-      &[open] {
-        opacity: 0;
-      }
-
+      &[open],
       &[open]::backdrop {
         opacity: 0;
       }
diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css
index c1bb3dc61..33072b65d 100644
--- a/app/assets/stylesheets/popup.css
+++ b/app/assets/stylesheets/popup.css
@@ -153,7 +153,7 @@
     transform: scale(0.2) translateX(-50%);
     transform-origin: top left;
     transition: var(--dialog-duration) allow-discrete;
-    transition-property: display, opacity, overlay transform;
+    transition-property: display, opacity, overlay, transform;
 
     &::backdrop {
       background-color: var(--color-always-black);
diff --git a/app/javascript/controllers/lightbox_controller.js b/app/javascript/controllers/lightbox_controller.js
index c2a541a13..70cb61d38 100644
--- a/app/javascript/controllers/lightbox_controller.js
+++ b/app/javascript/controllers/lightbox_controller.js
@@ -3,13 +3,25 @@ import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
   static targets = [ "image", "dialog", "zoomedImage" ]
 
+  connect() {
+    this.dialogTarget.addEventListener('transitionend', this.onTransitionEnd.bind(this))
+  }
+
+  // Only remove the image src after the CSS transition has finished
+  onTransitionEnd(event) {
+    if (this._waitingForTransition && !this.dialogTarget.open) {
+      this._waitingForTransition = false
+      this.zoomedImageTarget.src = ""
+    }
+  }
+
   open(event) {
     this.dialogTarget.showModal()
     this.#set(event.target.closest("a"))
   }
 
   reset() {
-    this.zoomedImageTarget.src = ""
+    this._waitingForTransition = true
   }
 
   #set(target) {