Fade between full and min header image [PUB-200]

art-institute-of-chicago · Aug 22, 2024 · 8499b51 · 8499b51
1 parent b6f979c
commit 8499b51
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git a/frontend/scss/molecules/_m-article-header.scss b/frontend/scss/molecules/_m-article-header.scss
@@ -1163,14 +1163,19 @@
     }
 
     .s-shrinking-digital-publication-header.s-scroll-direction-down & {
+      .m-article-header__img img {
+        opacity: 0;
+        transition: opacity 2s;
+      }
+
       .title {
         opacity: 0;
-        transition: opacity 1s;
+        transition: opacity 2s;
       }
 
       .subtitle {
         opacity: 0;
-        transition: opacity 1s;
+        transition: opacity 2s;
       }
     }
 
@@ -1198,7 +1203,13 @@
       }
 
       .m-article-header__img {
+        flex: 0 0 auto;
         height: 180px;
+
+        img {
+          opacity: 1;
+          transition: opacity 2s;
+        }
       }
     }
 
@@ -1216,6 +1227,10 @@
       height: 75vh;
       right: 50%;
       margin-right: -50vw;
+
+      &::before {
+        z-index: -1;
+      }
     }
   }
 
@@ -1229,11 +1244,6 @@
       margin-left: 0;
       max-width: colspan(50, 'xlarge');
     }
-    .m-article-header__img {
-      height: 75vh;
-      right: 50%;
-      margin-right: -50vw;
-    }
   }
 }
 

diff --git a/resources/views/components/molecules/_m-article-header----feature.blade.php b/resources/views/components/molecules/_m-article-header----feature.blade.php
@@ -1,5 +1,6 @@
 @if ($bgcolor ?? false)
     <style>
+        .{{ (isset($variation)) ? $variation : 'm-article-header--feature' }} .m-article-header__img::before,
         .{{ (isset($variation)) ? $variation : 'm-article-header--feature' }} .m-article-header__text,
         .{{ (isset($variation)) ? $variation : 'm-article-header--feature' }} .m-article-header__text::before {
             background-color: {{ $bgcolor }};