fix(card): hover effect on non-touch only

2021-01-27 00:08:33 +00:00
parent 9c84cb91c9
commit 637e90d7a5
1 changed files with 9 additions and 6 deletions
--- a/src/components/card.js
+++ b/src/components/card.js
@@ -29,12 +29,15 @@ const Content = styled.div`
 const Container = styled.div`
  position: relative;
  overflow: hidden;
-  &:hover ${Content} {
-    background-color: rgba(0, 0, 0, 0.65);
-    transform: translate3d(0, 0, 0);
-  }
-  &:hover ${Media} {
-    transform: scale(1.05);
+
+  @media (hover: hover) and (pointer: fine) {
+    &:hover ${Content} {
+      background-color: rgba(0, 0, 0, 0.65);
+      transform: translate3d(0, 0, 0);
+    }
+    &:hover ${Media} {
+      transform: scale(1.05);
+    }
  }
 `;