fix vertical alignment of card contents

index.html

@@ -29,8 +29,8 @@
 }
 
 .image {
-  max-height: 70%;
-  min-height: 70%;
+  max-height: 40%;
+  min-height: 40%;
   opacity: .7;
   overflow: hidden;
   transition: all .2s ease-in-out;
@@ -38,9 +38,10 @@
 
 .image:hover,
 .card:hover .image {
-  max-height: 70%;
-  min-height: 70%;
+  max-height: 40%;
+  min-height: 40%;
   opacity: 1;
+  bottom: 60%;
 }
 
 .text {
@@ -48,9 +49,11 @@
   text-align: left;
   background: transparent;
   padding: 0.2em 0.4em;
-  min-height: 30%;
-  max-height: 30%;
+  min-height: 60%;
+  max-height: 60%;
   margin: 0.2em;
+  top: 40%;
+  position: absolute;
 }
 
 .text p {
@@ -65,6 +68,7 @@
   background: transparent;
   min-height: 100%;
   min-width: 100%;
+  padding: 0.2em 0.4em 60%;
 }
 .l-box {
   padding: 0.5em;
@@ -77,7 +81,7 @@
       <div class="card">
         <button form="news" style="color: gold; border-color: gold">
           <div class="image">
-            <table style="display: inline-block"><tr style="vertical-align: top"><td><img src="//upload.wikimedia.org/wikipedia/en/thumb/4/43/Feed-icon.svg/128px-Feed-icon.svg.png" width="32" alt="RSS"></td><td style="padding: 10px"><h2>News</h2></td></tr></table>
+            <table style="display: inline-block"><tr style="vertical-align: baseline"><td><img src="//upload.wikimedia.org/wikipedia/en/thumb/4/43/Feed-icon.svg/128px-Feed-icon.svg.png" width="32" alt="RSS"></td><td><h2>News</h2></td></tr></table>
           </div>
           <div class="text">
             <h3>News Feed</h3>
@@ -93,7 +97,7 @@
       <div class="card">
         <button form="discovery" style="color: gold; border-color: gold">
           <div class="image">
-            <table style="display: inline-block"><tr style="vertical-align: top"><td><img src="//upload.wikimedia.org/wikipedia/en/thumb/4/43/Feed-icon.svg/128px-Feed-icon.svg.png" width="32" alt="RSS"></td><td style="padding: 10px"><h2>Discover</h2></td></tr></table>
+            <table style="display: inline-block"><tr style="vertical-align: baseline"><td><img src="//upload.wikimedia.org/wikipedia/en/thumb/4/43/Feed-icon.svg/128px-Feed-icon.svg.png" width="32" alt="RSS"></td><td><h2>Discover</h2></td></tr></table>
           </div>
           <div class="text">
             <h3>Disocvery Feed</h3>
@@ -109,7 +113,7 @@
       <div class="card">
         <button form="humour" style="color: gold; border-color: gold">
           <div class="image">
-            <table style="display: inline-block"><tr style="vertical-align: top"><td><img src="//upload.wikimedia.org/wikipedia/en/thumb/4/43/Feed-icon.svg/128px-Feed-icon.svg.png" width="32" alt="RSS"></td><td style="padding: 10px"><h2>Humour</h2></td></tr></table>
+            <table style="display: inline-block"><tr style="vertical-align: baseline"><td><img src="//upload.wikimedia.org/wikipedia/en/thumb/4/43/Feed-icon.svg/128px-Feed-icon.svg.png" width="32" alt="RSS"></td><td><h2>Humour</h2></td></tr></table>
           </div>
           <div class="text">
             <h3>Humour Feed</h3>