Update CSS

index.html

@@ -100,10 +100,7 @@
 
                         <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>
+                            <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>

styles.css

@@ -357,38 +357,17 @@ main {
     opacity: 0.85;
     margin: 0;
     padding: 0.5rem;
-}
-
-.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;
+    max-height: 2.9rem;
+    line-height: 1.1rem;
+    overflow: hidden;
     color: #111111;
+    font-size: 0.9rem;
 }
 
-.overlay > .overlay-description:hover + .overlay-additional-information {
-    display: block;
+.overlay > .overlay-description:hover {
+    max-height: 100%;
+    overflow: visible;
 }
 
 .nasa-launch {
@@ -465,8 +444,10 @@ main {
         font-size: 0.7rem;
     }
     
-    .overlay-description > * {
+    .overlay > .overlay-description {
         font-size: 0.7rem;
+        max-height: 2.5rem;
+        line-height: 0.9rem;
     }
 
     .nasa-launch h4 {
@@ -540,8 +521,10 @@ main {
         font-size: 0.8rem;
     }
     
-    .overlay-description > * {
+    .overlay > .overlay-description {
         font-size: 0.8rem;
+        max-height: 2.7rem;
+        line-height: 1rem;
     }
 
     .nasa-launch h4 {
@@ -601,8 +584,10 @@ main {
         font-size: 0.9rem;
     }
     
-    .overlay-description > * {
+    .overlay > .overlay-description {
         font-size: 0.9rem;
+        max-height: 2.9rem;
+        line-height: 1.1rem;
     }
 
     .nasa-launch h4 {