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}
` : ''}