adding a description in the rotating image gallery

jephlandicho · jephlandicho · commit 62b71ea18927 · 2024-04-04T08:10:01.000Z
diff --git a/projects/rotating-image-gallery/index.html b/projects/rotating-image-gallery/index.html
@@ -10,28 +10,52 @@
   <body>
     <div class="image-container">
       <span style="--i: 1">
-        <img src="https://picsum.photos/id/237/300/200" />
+        <div class="image-wrapper">
+          <img src="https://picsum.photos/id/237/300/200" />
+          <div class="description">Description 1</div>
+        </div>
       </span>
       <span style="--i: 2">
-        <img src="https://picsum.photos/id/23/300/200" />
+        <div class="image-wrapper">
+          <img src="https://picsum.photos/id/23/300/200" />
+          <div class="description">Description 2</div>
+        </div>
       </span>
       <span style="--i: 3">
-        <img src="https://picsum.photos/id/48/300/200" />
+        <div class="image-wrapper">
+          <img src="https://picsum.photos/id/48/300/200" />
+          <div class="description">Description 3</div>
+        </div>
       </span>
       <span style="--i: 4">
-        <img src="https://picsum.photos/id/12/300/200" />
+        <div class="image-wrapper">
+          <img src="https://picsum.photos/id/12/300/200" />
+          <div class="description">Description 4</div>
+        </div>
       </span>
       <span style="--i: 5">
-        <img src="https://picsum.photos/id/59/300/200" />
+        <div class="image-wrapper">
+          <img src="https://picsum.photos/id/59/300/200" />
+          <div class="description">Description 5</div>
+        </div>
       </span>
       <span style="--i: 6">
-        <img src="https://picsum.photos/id/160/300/200" />
+        <div class="image-wrapper">
+          <img src="https://picsum.photos/id/160/300/200" />
+          <div class="description">Description 6</div>
+        </div>
       </span>
       <span style="--i: 7">
-        <img src="https://picsum.photos/id/370/300/200" />
+        <div class="image-wrapper">
+          <img src="https://picsum.photos/id/370/300/200" />
+          <div class="description">Description 7</div>
+        </div>
       </span>
       <span style="--i: 8">
-        <img src="https://picsum.photos/id/478/300/200" />
+        <div class="image-wrapper">
+          <img src="https://picsum.photos/id/478/300/200" />
+          <div class="description">Description 8</div>
+        </div>
       </span>
     </div>
     <div class="btn-container">
diff --git a/projects/rotating-image-gallery/style.css b/projects/rotating-image-gallery/style.css
@@ -34,6 +34,22 @@ body {
   width: 100%;
 }
 
+.image-wrapper {
+  position: relative;
+}
+
+.description {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+  color: white;
+  padding: 5px;
+  box-sizing: border-box;
+  text-align: center;
+}
+
 .btn-container {
   position: relative;
   width: 80%;
