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 {