Use linear gradient mask for fading location illustration on bottom

2022-06-20 14:57:09 +02:00
parent f824eb3016
commit e1db876993
1 changed files with 7 additions and 0 deletions
--- a/src/style/pages/_location.scss
+++ b/src/style/pages/_location.scss
@@ -166,6 +166,13 @@
        overflow: hidden;
        transform-origin: top center;

+        /* Bottom fading gradient for illustration */
+        @include bp (sm) {
+            $mask: linear-gradient(180deg,rgba(0,0,0) 0%,rgb(0,0,0) 70%,rgba(0,0,0,0) 100%);
+            -webkit-mask-image: $mask;
+            mask-image: $mask;
+        }
+
        img {
            display: block;
            width: 100%;