diff --git a/src/components/comment/CommentImageGrid/styles.module.scss b/src/components/comment/CommentImageGrid/styles.module.scss index 2440b3f7..cfdc9d71 100644 --- a/src/components/comment/CommentImageGrid/styles.module.scss +++ b/src/components/comment/CommentImageGrid/styles.module.scss @@ -3,6 +3,7 @@ .images { cursor: pointer; + overflow: visible !important; &.multiple { // Desktop devices diff --git a/src/components/common/Hoverable/styles.module.scss b/src/components/common/Hoverable/styles.module.scss index d6b48675..e648faff 100644 --- a/src/components/common/Hoverable/styles.module.scss +++ b/src/components/common/Hoverable/styles.module.scss @@ -11,7 +11,6 @@ border-radius: $radius; opacity: 0; transition: all 100ms; - box-shadow: inset $color_primary 0 0 0 2px; touch-action: none; pointer-events: none; } @@ -23,6 +22,8 @@ &:hover { z-index: 10; transition: all 100ms; + transform: scale(1.025) translateY(-2%); + box-shadow: rgba(0, 0, 0, 0.5) 0 10px 10px 5px; &::after { opacity: 1; diff --git a/src/containers/lab/LabGrid/index.tsx b/src/containers/lab/LabGrid/index.tsx index 9ae933d6..8f0b9896 100644 --- a/src/containers/lab/LabGrid/index.tsx +++ b/src/containers/lab/LabGrid/index.tsx @@ -1,5 +1,6 @@ import { FC, memo } from 'react'; +import { Hoverable } from '~/components/common/Hoverable'; import { Columns } from '~/components/containers/Columns'; import { InfiniteScroll } from '~/components/containers/InfiniteScroll'; import { LabNoResults } from '~/components/lab/LabNoResults'; @@ -22,12 +23,13 @@ const LabGrid: FC = memo(() => {
{nodes.map((node) => ( - + + + ))}