made better hoverables

src/components/comment/CommentImageGrid/styles.module.scss

@@ -3,6 +3,7 @@
 
 .images {
   cursor: pointer;
+  overflow: visible !important;
 
   &.multiple {
     // Desktop devices

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;

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<IProps> = memo(() => {
     <div className={styles.wrap}>
       <Columns hasMore={hasMore && !isLoading} onScrollEnd={loadMore}>
         {nodes.map((node) => (
-          <LabNode
-            node={node.node}
-            key={node.node.id}
-            lastSeen={node.last_seen}
-            commentCount={node.comment_count}
-          />
+          <Hoverable key={node.node.id}>
+            <LabNode
+              node={node.node}
+              lastSeen={node.last_seen}
+              commentCount={node.comment_count}
+            />
+          </Hoverable>
         ))}
       </Columns>
     </div>