Skip to content
Snippets Groups Projects
Commit b7e26d5f authored by Silas Meister's avatar Silas Meister
Browse files

Fix css hover

parent 3032a04c
Branches
No related tags found
No related merge requests found
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;
});
}
......@@ -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>
......
......@@ -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;
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment