fix: add blur to lqip images. (#1020)

sebastianthulin · Sebastian Thulin · web-flow · commit 508c2afaa936 · 2025-03-28T10:25:16.000+01:00
Co-authored-by: Sebastian Thulin &lt;sebastian.thulin@helsingborg.se&gt;
diff --git a/source/sass/component/_image.scss b/source/sass/component/_image.scss
@@ -96,7 +96,7 @@ $c-image-border-radius: var(--c-image-border-radius, $border-radius-xs) !default
 
         @include mq(map_get($breakpoints-map, 'xs'), 'sm') {
             bottom: calc(#{map-get($spacers, '8')} * -1);
-            word-break: break-word;
+            overflow-wrap: break-word;
         }
     }
 
@@ -119,9 +119,18 @@ $c-image-border-radius: var(--c-image-border-radius, $border-radius-xs) !default
         background-size: cover;
         width: 100%;
         height: 100%;
+
+        &:after {
+            content: "";
+            @include cover();
+            backdrop-filter: blur(4px);
+            z-index: 0;
+        }
     }
     .c-image.c-image--container-query .c-image__image {
         display: none;
+        z-index: $level-1;
+        position: relative;
     }
 }
 @supports not (container-type: size) {

Original file line number	Diff line number	Diff line change
`@@ -96,7 +96,7 @@ $c-image-border-radius: var(--c-image-border-radius, $border-radius-xs) !default`
`96`	`96`
`97`	`97`	`@include mq(map_get($breakpoints-map, 'xs'), 'sm') {`
`98`	`98`	`bottom: calc(#{map-get($spacers, '8')} * -1);`
`99`		`- word-break: break-word;`
	`99`	`+ overflow-wrap: break-word;`
`100`	`100`	`}`
`101`	`101`	`}`
`102`	`102`
`@@ -119,9 +119,18 @@ $c-image-border-radius: var(--c-image-border-radius, $border-radius-xs) !default`
`119`	`119`	`background-size: cover;`
`120`	`120`	`width: 100%;`
`121`	`121`	`height: 100%;`
	`122`	`+`
	`123`	`+ &:after {`
	`124`	`+ content: "";`
	`125`	`+ @include cover();`
	`126`	`+ backdrop-filter: blur(4px);`
	`127`	`+ z-index: 0;`
	`128`	`+ }`
`122`	`129`	`}`
`123`	`130`	`.c-image.c-image--container-query .c-image__image {`
`124`	`131`	`display: none;`
	`132`	`+ z-index: $level-1;`
	`133`	`+ position: relative;`
`125`	`134`	`}`
`126`	`135`	`}`
`127`	`136`	`@supports not (container-type: size) {`