JSFiddle - React, Tailwind, and code Playground

HTML

<h4 style="text-align: center;">Wählen Sie</h4>
<table id="category_table">
  <tr>
    <td>
      <figure class="category_element">
          <a href="https://de.wikipedia.org/wiki/Sonne"><img class="image" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/128/Status-weather-clear-icon.png"/></a>
        <figcaption>
          <p class="overlay"><span><a href="https://de.wikipedia.org/wiki/Sonne" target="_self" style="text-decoration: none; color:white">Auf zur Sonne</a></span></p><p>Sonne</p>
        </figcaption>
      </figure>
      
    </td>
        <td>
      <figure class="category_element">
          <a href="https://de.wikipedia.org/wiki/Mond"><img class="image" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/128/Status-weather-clear-night-icon.png"/></a>
        <figcaption>
          <p class="overlay"><span><a href="https://de.wikipedia.org/wiki/Mond" target="_self" style="text-decoration: none; color:white">Auf zum Mond</a></span></p><p>Mond</p>
        </figcaption>
      </figure>
    </td>
  </tr>
</table>

CSS

*, html {
margin : 0;
padding :  0;
}
#category_table {
  margin : 0 auto;
  width : 25%;
  height : 50px;
}

.overlay {
  position: absolute; 
  bottom: 0; 
  background: rgb(240, 77, 5);
  background: rgba(240, 77, 51, 0.9);
  border-radius: 1ex 2ex;
  width: 100%;
  transition: 2s ease;
  opacity:0;
}
.overlay span {display: inline-block; padding: 1em}

figure {position: relative; text-align: center}

figcaption:hover .overlay {opacity: 1}

figure {margin: 0; padding:0}

figure.category_element {
    height: auto;
    width: auto;
    display: center
}

.category_element:hover .overlay {
  opacity: 1;
}