Add card image overlays

2 files changed, 26 insertions, 7 deletions

diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index e6f266d..d1463d3 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -14,7 +14,7 @@
         position:         relative;
         display:          flex;
         flex-direction:   column;
-        margin:           calc(-1 * props.get(vars.$key-focus--border-width));
+        margin-inline:    calc(-1 * props.get(vars.$key-focus--border-width));
         background-color: props.get(vars.$bg-color);
         background-clip:  content-box;
         border:           props.get(vars.$key-focus--border-offset) solid transparent;
@@ -55,9 +55,11 @@
         }
 
         @include bem.elem('image') {
+            position:    relative;
             display:     block;
             flex:        0 0 auto;
             inline-size: 100%;
+            overflow:    hidden;
             object-fit:  cover;
             transition:  transform .2s, opacity .2s;
 
@@ -76,6 +78,21 @@
             }
         }
 
+        @include bem.elem('image-img') {
+            display:     block;
+            inline-size: 100%;
+            object-fit:  cover;
+        }
+
+        @include bem.elem('image-overlay') {
+            position:        absolute;
+            inset-block-end: 0;
+            inset-inline:    0;
+            z-index:         10;
+            padding-block:   props.get(vars.$image-overlay--pad-b);
+            padding-inline:  props.get(vars.$image-overlay--pad-i);
+        }
+
         @include bem.elem('body') {
             flex:            1 0 auto;
             padding-block:   props.get(vars.$pad-b);
@@ -129,7 +146,7 @@
 
         @include bem.modifier('quiet') {
             position:         relative;
-            margin:           0;
+            margin-inline:    0;
             background-color: transparent;
             border:           0;
 
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss
index 8ee7158..9cdc177 100644
--- a/src/objects/_card.vars.scss
+++ b/src/objects/_card.vars.scss
@@ -2,11 +2,13 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
 
-$divider-width: props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default;
-$pad-i:         props.def(--o-card--pad-i, props.get(core.$size--300)) !default;
-$pad-b:         props.def(--o-card--pad-b, props.get(core.$size--250)) !default;
-$spacing:       props.def(--o-card--spacing, props.get(core.$size--200)) !default;
-$rounding:      props.def(--o-card--rounding, props.get(core.$rounding)) !default;
+$divider-width:        props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default;
+$pad-i:                props.def(--o-card--pad-i, props.get(core.$size--300)) !default;
+$pad-b:                props.def(--o-card--pad-b, props.get(core.$size--250)) !default;
+$spacing:              props.def(--o-card--spacing, props.get(core.$size--200)) !default;
+$rounding:             props.def(--o-card--rounding, props.get(core.$rounding)) !default;
+$image-overlay--pad-i: props.def(--o-card--image-overlay--pad-i, calc(.5 * props.get($pad-i))) !default;
+$image-overlay--pad-b: props.def(--o-card--image-overlay--pad-b, calc(.5 * props.get($pad-b))) !default;
 
 $hover--offset-b: props.def(--o-card--hover--offset-b, calc(-1 * props.get(core.$size--65))) !default;