diff --git a/index.html b/index.html
index 0d5d7552a4ddba391e982972be0a8e6611d2891e..8c939ca62eb4d48208c41f7de1b3f6d4128976f3 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,6 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="functions.js"></script>
- <script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body onload="">
@@ -99,10 +98,11 @@
<img class="article-image" src="img/astronaut.jpg"></img>
- <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</h4>
+ <div class="article-content overlay">
+ <h4 class="overlay-title">Expedition 48</h4>
+ <div class="overlay-description">
+ <h4>NASA's Record-braking Astronaut Crewmates Safely Return to Earth</h4>
+ <p>Here is some additional information to the article where you can read more!</p>
</div>
</div>
</div>
diff --git a/styles.css b/styles.css
index cf7ed2a0118c0dbfa9a575f2f0f78e16be98349b..4b9f455a904862e89283da9f4620b50a3d25d69e 100644
--- a/styles.css
+++ b/styles.css
@@ -333,6 +333,7 @@ main {
font-size: 0.8rem;
}
+
.overlay {
display: flex;
flex-direction: column;
@@ -356,11 +357,40 @@ main {
opacity: 0.85;
margin: 0;
padding: 0.5rem;
- font-weight: 500;
+}
+
+.overlay-description > * {
color: #111111;
+ margin: 0;
font-size: 0.9rem;
}
+.overlay-description > h4 {
+ font-weight: 500;
+}
+
+.overlay-description > p {
+ display: none;
+}
+
+.overlay-description:hover > p {
+ display: block;
+}
+
+.overlay > .overlay-additional-information {
+ display: none;
+ background-color: #eeeeee;
+ opacity: 0.85;
+ margin: 0;
+ padding: 0.5rem;
+ font-size: 0.9em;
+ color: #111111;
+}
+
+.overlay > .overlay-description:hover + .overlay-additional-information {
+ display: block;
+}
+
.nasa-launch {
background-color: #eeeeee;
}
@@ -399,6 +429,7 @@ main {
height: 100%;
}
+
/*.content-small div div, .content-medium div div, .content-large div div {
background-color: blue;
}*/
@@ -434,7 +465,7 @@ main {
font-size: 0.7rem;
}
- .overlay > .overlay-description {
+ .overlay-description > * {
font-size: 0.7rem;
}
@@ -509,7 +540,7 @@ main {
font-size: 0.8rem;
}
- .overlay > .overlay-description {
+ .overlay-description > * {
font-size: 0.8rem;
}
@@ -570,7 +601,7 @@ main {
font-size: 0.9rem;
}
- .overlay > .overlay-description {
+ .overlay-description > * {
font-size: 0.9rem;
}