Add showcase for text over carousel image

NASA-IMPACT · Nov 22, 2024 · d88ba77 · d88ba77
1 parent 29c2fd8
commit d88ba77
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git a/overrides/home/carousel/index.tsx b/overrides/home/carousel/index.tsx
@@ -60,6 +60,29 @@ export function DesktopCarousel () {
             classNames="imagetransition"
           >
             <div className="carousel--height width-full position-absolute left-0 top-0 shadow-1">
+              { (itemInProgress.imageOverlayText1 || itemInProgress.imageOverlayText2) && (
+                  <div
+                    className="position-absolute text-lower-left"
+                    style={{
+                      bottom: '10px',
+                      left: '10px',
+                      color: '#fff',
+                      background: 'rgba(0, 0, 0, 0.5)',
+                      padding: '10px',
+                      borderRadius: '4px',
+                      fontSize: '1.2rem',
+                      fontWeight: 'bold',
+                      lineHeight: '1.5'
+                    }}
+                  >
+                    {itemInProgress.imageOverlayText1 && (
+                      <span style={{ display: 'block' }}>{itemInProgress.imageOverlayText1}</span>
+                    )}
+                    {itemInProgress.imageOverlayText2 && (
+                      <span style={{ display: 'block' }}>{itemInProgress.imageOverlayText2}</span>
+                    )}
+                  </div>
+                )}
               <img className="carousel--content-image" src={itemInProgress.image} alt={itemInProgress.imageAlt} />
             </div>
           </CSSTransition>

diff --git a/overrides/home/carousel/items.js b/overrides/home/carousel/items.js
@@ -4,7 +4,9 @@ export default [
       title: 'U.S. Greenhouse Gas Center',
       description: "The U.S. Greenhouse Gas Center (US GHG Center) is a multi-agency effort consolidating greenhouse gas information from observations and models.",
       image: new URL('../media/ghgc-v2.jpg', import.meta.url).href,
-      imageAlt: 'Earth with Greenhouse Gas Emissions shaded in red'
+      imageAlt: 'Earth with Greenhouse Gas Emissions shaded in red',
+      imageOverlayText1: 'U.S. Greenhouse Gas Center',
+      imageOverlayText2: 'Example second line text'
     },
     {
       link: 'https://earth.gov/sealevel',