implemented sink effect

Signed-off-by: Giuseppe Macri <[email protected]>
keplergl · Sep 5, 2023 · c64190e · c64190e
1 parent 5da895a
commit c64190e
Showing 1 changed file with 11 additions and 1 deletion.
diff --git a/website/src/components/studio.js b/website/src/components/studio.js
@@ -149,6 +149,16 @@ const MapCardImage = styled.img`
   height: 230px;
   width: 386px;
   box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.5);
+  transform: translateZ(0);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+  -webkit-transition-property: transform;
+  transition-property: transform;
+  -webkit-transition-timing-function: ease-out;
+  transition-timing-function: ease-out;
 `;
 
 const MapCard = styled.a`
@@ -166,7 +176,7 @@ const MapCard = styled.a`
 
   :hover {
     ${MapCardImage} {
-      box-shadow: 0 12px 24px 0 rgba(122, 122, 122, 0.5);
+      transform: translateY(8px);
     }
   }
 `;