Finish task 2

data/uploads/news_02.json

@@ -2,7 +2,7 @@
     "news":[
         {
             "title":"NASA Events", 
-            "imgurl":"../img/astronaut.jpg",
+            "imgurl":"",
             "content":"Wednesday, Sept. 7: OSIRIS-REx Science and Engineering Talk (12 p.m. EDT), Asteroid Panel Discussion (1 p.m. EDT), NASA TV"
         },
         {

functions.js

 let slideNumber = 0;
 
-const newsImageSources = ['img/nasa_news_1.jpg', 'img/nasa_news_2.jpg', 'img/nasa_news_3.jpg'];
+const newsImageSources = ['../img/nasa_news_1.jpg', '../img/nasa_news_2.jpg', '../img/nasa_news_3.jpg'];
 const newsTitles = ['Space Station', 'Earth', 'NASA Goddard'];
 const newsSubtitles = ['Expedition 48 Crew Lands Safely on Earth', 'NASA Announces Summer 2023 Hottest on Record', 'NASA\'s Webb Snaps Supersonic Outflow of Young Star'];
 
-window.onload = onload();
+document.addEventListener("DOMContentLoaded", function() {
+    onload();
+});
 
 function onload() {
     console.log("Page loaded");
 
     setInterval(slideImage, 30000);
+
+    setHoverForOverlay();
 }
 
 function slideImage() {
@@ -28,4 +32,24 @@ function slideImage() {
     slideImage.src = newsImageSource;
     slideTitle.textContent = newsTitle;
     slideSubtitle.textContent = newsSubtitle;
+}
+
+function setHoverForOverlay() {
+    let overlayDescription = document.querySelector('.overlay > .overlay-description');
+
+    overlayDescription.addEventListener("mouseover", function() { hover(true); })
+    overlayDescription.addEventListener("mouseout", function() { hover(false); })
+}
+
+function hover(hoverActivated) {
+    let height = "";
+
+    if (hoverActivated)
+        height = "100%";
+    else
+        height = "auto";
+
+    document.querySelectorAll(".overlay").forEach(function(element) {
+        element.style.height = height;
+    });
 }
\ No newline at end of file

index.html

@@ -66,6 +66,8 @@
             <article class="content-small">
                 <div>
                     <div class="article-content-container">
+                        <div class="article-background"></div>
+
                         <a class="article-link" href="#"></a>
 
                         <div class="article-content nasa-events-container">
@@ -101,8 +103,10 @@
                         <img class="article-image" src="img/astronaut.jpg" alt="" />
 
                         <div class="article-content overlay">
-                            <h4 class="overlay-title">Expedition 48</h4>
-                            <h4 class="overlay-description">NASA's Record-braking Astronaut Crewmates Safely Return to Earth. Here is some additional information to the article where you can read more!</h4>
+                            <div class="overlay">
+                                <h4 class="overlay-title">Expedition 48</h4>
+                                <h4 class="overlay-description">NASA's Record-braking Astronaut Crewmates Safely Return to Earth. Here is some additional information to the article where you can read more!</h4>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -136,6 +140,8 @@
             <article class="content-small">
                 <div>
                     <div class="article-content-container">
+                        <div class="article-background"></div>
+
                         <a class="article-link" href="#"></a>
 
                         <div class="article-content">
@@ -147,6 +153,8 @@
             <article class="content-medium">
                 <div>
                     <div class="article-content-container">
+                        <div class="article-background"></div>
+
                         <a class="article-link" href="#"></a>  
 
                         <img class="article-image" src="img/ocean_worlds.jpg" alt="" />

php/Index.php

@@ -169,9 +169,11 @@ EOT;
 
                 <img class="article-image" src="$imgurl" alt="" />
 
-                <div class="article-content overlay">
-                    <h4 class="overlay-title">$title</h4>
-                    <h4 class="overlay-description">$content</h4>
+                <div class="article-content">
+                    <div class="overlay">
+                        <h4 class="overlay-title">$title</h4>
+                        <h4 class="overlay-description">$content</h4>
+                    </div>
                 </div>
             </div>
         </div>

php/Page.php

@@ -48,6 +48,7 @@ abstract class Page {
     <title>$title</title>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <script src="../functions.js"></script>
     <link rel="stylesheet" style="text/css" href="../styles.css" />
 </head>
 EOT;

php/constants.php

 <?php
     define('NEWS_FILE', 'news_file');
-    define('DEFAULT_NEWS_FILE', '../data/upload/news_01.json');
+    define('DEFAULT_NEWS_FILE', '../data/uploads/news_01.json');
     define('EXPIRES', 'EXPIRES')
 ?>
\ No newline at end of file

styles.css

@@ -358,11 +358,10 @@ main {
     font-size: 0.8rem;
 }
 
-
 .overlay {
     display: flex;
     flex-direction: column;
-    justify-content: flex-end;
+    justify-content: flex-start;
     align-items: flex-start;
     position: absolute;
     bottom: 0;
@@ -375,6 +374,7 @@ main {
     background-color: #39719e;
     opacity: 0.85;
     font-size: 0.9rem;
+    flex: 0 0 auto;
 }
 
 .overlay > .overlay-description {
@@ -388,6 +388,7 @@ main {
     overflow: hidden;
     color: #111111;
     font-size: 0.9rem;
+    flex: 1 1 auto;
 }
 
 .overlay > .overlay-description:hover {