From 356b63166de51123325ab640b0cff6fcc6fb95ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Fri, 29 Oct 2021 23:46:20 +0200
Subject: [PATCH] [wip] Add hover effect on Shop Poster component

---
 src/style/molecules/_poster.scss | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/style/molecules/_poster.scss b/src/style/molecules/_poster.scss
index 98e5c3d..6b98e32 100644
--- a/src/style/molecules/_poster.scss
+++ b/src/style/molecules/_poster.scss
@@ -1,6 +1,7 @@
 .poster {
     position: relative;
     border-radius: 6px;
+    overflow: hidden;
     max-width: 326px;
 
     @include bp (sm) {
@@ -12,40 +13,48 @@
         display: block;
         width: 100%;
         height: auto;
+        box-shadow:
+            0 6px 6px rgba(#000, 0.08),
+            0 12px 12px rgba(#000, 0.08),
+            0 24px 24px rgba(#000, 0.08);
+        border-radius: 4px;
+        transition: transform 0.8s var(--ease-quart), border-radius 0.8s var(--ease-quart);
     }
 
     .buttons {
         display: flex;
         margin-top: 40px;
         justify-content: center;
+        // opacity: 0;
+        transform: translate3d(0, 48px, 0);
+        transition: transform 0.8s var(--ease-quart), opacity 0.4s var(--ease-quart);
 
         @include bp (sm) {
             position: absolute;
             align-items: center;
-            justify-content: space-between;
+            justify-content: center;
             bottom: 14px;
             left: 10%;
             right: 10%;
-            // margin: 0 10% 28px;
-            white-space: nowrap;
         }
 
         a {
             margin-right: 8px;
             margin-left: 8px;
-
-            @include bp (sm) {
-                margin: 0;
-            }
+            text-align: center;
         }
     }
 
+    // Hover effect
     &:hover {
         img {
             transform: scale(0.8) translate3d(0, -5%, 0);
+            border-radius: 8px;
         }
         .buttons {
-            display: flex;
+            opacity: 1;
+            transform: translate3d(0,0,0);
+            // transition-delay: 50ms;
         }
     }