From 7d2b74001c8663e62c9dcc973d4976147dfd08e5 Mon Sep 17 00:00:00 2001 From: Knight Date: Sat, 28 Dec 2024 12:04:42 -0500 Subject: [PATCH] Add description overlay to images in generateSite.js. Updated CSS to position a description text overlay on images, enhancing visual presentation and user engagement. This change improves the overall aesthetics and provides context for displayed images. --- generateSite.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/generateSite.js b/generateSite.js index c1cc662..1e6d03b 100644 --- a/generateSite.js +++ b/generateSite.js @@ -58,6 +58,7 @@ async function generateSite() { max-height: 100vh; margin: 0 auto; display: grid; /* Use grid for overlay */ + position: relative; /* Add this to contain the description */ } .progressive-image { width: 100%; @@ -79,6 +80,20 @@ async function generateSite() { .full-image.loaded { opacity: 1; } + .description { + position: absolute; + bottom: 20px; + left: 20px; + max-width: 80%; + z-index: 2; + color: #cccccc; + opacity: 0.8; + mix-blend-mode: hard-light; + margin: 0; + font-size: 16px; + letter-spacing: 0.5px; + line-height: 1.4; + } @@ -96,9 +111,9 @@ async function generateSite() { alt="${image.metadata.description || ''}" onload="this.classList.add('loaded')" > + ${image.description ? `

${image.description}

` : ''} ` : '

Image not available

'} - ${image.description ? `

${image.description}

` : ''}
← →