Improved card hover effect

1 files changed, 21 insertions, 12 deletions

diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index cb18810..9e73dd9 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -1,13 +1,15 @@
 @include namespace('card') {
     @include store((
         --dims: (
-            --pad-x: 1.1em,
-            --pad-y: .8em
+            --pad-x:        1.1em,
+            --pad-y:        .8em,
+            --hover-offset: -.5rem,
         ),
         --colors: (
             --bg: prop(--colors --bg-lo, $global: true),
-            --flip: (
-                --bg: prop(--colors --bg-lo, $global: true),
+            --hover: (
+                --bg: prop(--colors --fg-lo, $global: true),
+                --fg: prop(--colors --bg-hi, $global: true),
             )
         )
     ));
@@ -23,21 +25,28 @@
         display:          flex;
         position:         relative;
         align-items:      center;
+        transition:       transform .2s, background-color .2s, color .2s;
         background-color: prop(--colors --bg);
         line-height:      1.4;
 
+        small,
+        strong {
+            transition: background-color .2s, color .2s;
+        }
+
         &:link,
         &:visited {
             color:           currentColor;
             text-decoration: none;
-        }
 
-        &:hover {
-            @include element('content') {
-                @include modifier('flip') {
-                    visibility: visible;
-                    transition: visibility 0s, opacity .2s;
-                    opacity:    1;
+            &:hover {
+                transform:        translateY(#{prop(--dims --hover-offset)});
+                background-color: prop(--colors --hover --bg);
+                color:            prop(--colors --hover --fg);
+    
+                small,
+                strong {
+                    color: prop(--colors --hover --fg);
                 }
             }
         }
@@ -55,7 +64,7 @@
                 height:           100%;
                 transition:       visibility 0s linear .2s, opacity .2s;
                 opacity:          0;
-                background-color: prop(--colors --flip --bg);
+                background-color: prop(--colors --hover --bg);
             }
 
             @include sibling-element('icon') {