diff --git a/frontend/elements/photo-lightbox.html b/frontend/elements/photo-lightbox.html
index 0b360a4..7e02bb3 100644
--- a/frontend/elements/photo-lightbox.html
+++ b/frontend/elements/photo-lightbox.html
@@ -73,6 +73,7 @@
     right: 0px;
     font-size: 0.6em;
     pointer-events: none;
+    transition: opacity 0.5s ease-in-out;
   }
 
   #actions {
@@ -83,6 +84,7 @@
     font-size: 0.6em;
     color: #ddd;
     pointer-events: none;
+    transition: opacity 0.5s ease-in-out;
   }
 
   :host([active]) #info,
diff --git a/frontend/elements/photo-thumbnail.html b/frontend/elements/photo-thumbnail.html
index c2682a1..ff6334a 100755
--- a/frontend/elements/photo-thumbnail.html
+++ b/frontend/elements/photo-thumbnail.html
@@ -46,6 +46,7 @@
         right: 0px;
         font-size: 0.6em;
         pointer-events: none;
+        transition: opacity 0.25s ease-in-out;
     }
 
     #actions {
@@ -56,10 +57,12 @@
         font-size: 0.6em;
         color: #ddd;
         pointer-events: none;
+        transition: opacity 0.25s ease-in-out;
     }
 
     :host(:hover) #info,
     :host(:hover) #actions {
+        transition: opacity 0.25s ease-in-out;
         opacity: 1;
         pointer-events: all;
     }