diff --git a/packages/app/src/views/Favorites/Favorites.js b/packages/app/src/views/Favorites/Favorites.js index f64474d2..2e59d6a9 100644 --- a/packages/app/src/views/Favorites/Favorites.js +++ b/packages/app/src/views/Favorites/Favorites.js @@ -345,6 +345,7 @@ className={css.itemCard} onClick={handleItemClick} data-index={index} > +
{imageUrl ? (
)} + ); }, [serverUrl, handleItemClick, items.length, totalCount, isLoading, loadItems, imageType, posterHeight, unifiedMode]); diff --git a/packages/app/src/views/Favorites/Favorites.module.less b/packages/app/src/views/Favorites/Favorites.module.less index 2f694779..3cc442ee 100644 --- a/packages/app/src/views/Favorites/Favorites.module.less +++ b/packages/app/src/views/Favorites/Favorites.module.less @@ -156,7 +156,6 @@ height: 0; .itemCard { position: relative; cursor: pointer; -transition: all 0.2s ease; border-radius: 8px; overflow: visible; background: transparent; @@ -164,15 +163,25 @@ margin: 10px; &:focus { outline: none; -transform: scale(1.05); z-index: 10; +.itemCardInner { +transform: scale(1.05); +} + .poster { border-color: white; } } } +.itemCardInner { +position: relative; +width: 100%; +height: 100%; +transition: transform 0.2s ease; +} + .poster { width: 100%; height: 270px; diff --git a/packages/app/src/views/Library/Library.js b/packages/app/src/views/Library/Library.js index 9005130e..254426d0 100644 --- a/packages/app/src/views/Library/Library.js +++ b/packages/app/src/views/Library/Library.js @@ -740,6 +740,7 @@ onFocus={() => { }} data-index={index} > +
{imageUrl ? (
)} + ); }, [effectiveServerUrl, handleItemClick, items.length, totalCount, isLoading, loadItems, effectiveImageType, posterHeight, isSquareImage, isFolderView, settings]); diff --git a/packages/app/src/views/Library/Library.module.less b/packages/app/src/views/Library/Library.module.less index 3bd28b1d..931d15a0 100644 --- a/packages/app/src/views/Library/Library.module.less +++ b/packages/app/src/views/Library/Library.module.less @@ -320,7 +320,6 @@ .itemCard { position: relative; cursor: pointer; - transition: transform 0.2s ease; border-radius: 8px; overflow: visible; background: transparent; @@ -328,15 +327,25 @@ &:focus { outline: none; - transform: scale(1.05); z-index: 10; + .itemCardInner { + transform: scale(1.05); + } + .poster { border-color: white; } } } +.itemCardInner { + position: relative; + width: 100%; + height: 100%; + transition: transform 0.2s ease; +} + .poster { width: 100%; height: 270px;