Fix css hover

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;
-}
\ No newline at end of file
+}
+
+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;
+    });
+}

index.html

@@ -98,9 +98,11 @@
 
                         <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="article-content">
+                            <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>

styles.css

@@ -333,11 +333,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;
@@ -350,6 +349,7 @@ main {
     background-color: #39719e;
     opacity: 0.85;
     font-size: 0.9rem;
+    flex: 0 0 auto;
 }
 
 .overlay > .overlay-description {
@@ -363,6 +363,7 @@ main {
     overflow: hidden;
     color: #111111;
     font-size: 0.9rem;
+    flex: 1 1 auto;
 }
 
 .overlay > .overlay-description:hover {
@@ -370,6 +371,7 @@ main {
     overflow: visible;
 }
 
+
 .nasa-launch {
     background-color: #eeeeee;
 }