From a3ce640c7e0e58a1008644f33f4cfdbadf1a323c Mon Sep 17 00:00:00 2001
From: M Fahru <m.fahru@overleaf.com>
Date: Fri, 25 Oct 2024 07:52:47 -0700
Subject: [PATCH] Merge pull request #21379 from
 overleaf/jel-gallery-images-hover

[web] Clickable gallery images hover effect

GitOrigin-RevId: dfd992d970f9b0a2171bf598c27d474a06a5be74
---
 .../components/gallery-search.scss            | 25 ++++++++-
 .../bootstrap-5/pages/templates-v2.scss       | 52 +++++++++++++++++--
 2 files changed, 72 insertions(+), 5 deletions(-)

diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/gallery-search.scss b/services/web/frontend/stylesheets/bootstrap-5/components/gallery-search.scss
index 03e6cb844f..77a31dad58 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/gallery-search.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/gallery-search.scss
@@ -48,12 +48,35 @@
           width: 100%;
 
           img {
+            @include shadow-md;
+
             width: 185px;
-            box-shadow: 0 2px 4px 0 rgba(30 37 48 / 16%);
+            border-radius: var(--border-radius-base);
+            position: relative;
 
             @include media-breakpoint-down(sm) {
               width: 35vw;
             }
+
+            &::before {
+              content: '';
+              background: var(--neutral-90);
+              opacity: 0;
+              position: absolute;
+              top: 0;
+              left: 0;
+              width: 100%;
+              height: 100%;
+              border-radius: var(--border-radius-base);
+              transition: opacity 0.15s ease-in-out;
+            }
+          }
+
+          &:hover {
+            &::before {
+              opacity: 0.08;
+              transition: opacity 0.15s ease-in-out;
+            }
           }
         }
       }
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss
index 5df3d34cb9..01f5431ea5 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss
@@ -144,19 +144,63 @@
 
       display: inline-block;
       width: 100%;
+
+      .thumbnail,
+      .thumbnail-tag {
+        position: relative;
+
+        &::before {
+          content: '';
+          background: var(--neutral-90);
+          opacity: 0;
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          transition: opacity 0.15s ease-in-out;
+        }
+      }
+
+      .thumbnail-tag {
+        &::before {
+          border-radius: var(--border-radius-medium);
+        }
+      }
+
+      .thumbnail {
+        &::before {
+          border-radius: var(--border-radius-base);
+        }
+      }
+
+      &:hover {
+        .thumbnail,
+        .thumbnail-tag {
+          &::before {
+            transition: opacity 0.15s ease-in-out;
+            opacity: 0.08;
+          }
+        }
+      }
     }
 
     .thumbnail,
     .thumbnail-tag {
-      width: 100%;
       margin: 0 0 var(--spacing-08) 0;
-      display: inline-block;
+
+      img {
+        width: 100%;
+        display: inline-block;
+      }
     }
 
     .thumbnail {
-      @include shadow-lg;
+      img {
+        @include shadow-lg;
 
-      border-radius: var(--border-radius-base);
+        border-radius: var(--border-radius-base);
+      }
     }
 
     .caption {