JSFiddle - React, Tailwind, and code Playground

HTML

<h4 style="text-align: center;">Wählen Sie</h4>
<div id="kategorie">
<div id="kat1"><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>
<div class="overlay"><a href="https://de.wikipedia.org/wiki/Sonne" target="_self">Auf zur Sonne</a></div>
<br />
<div align="center"><span style="color: #666666;">Sonne</span></div>
</div>
<div id="kat2"><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>
<div class="overlay"><a href="https://de.wikipedia.org/wiki/Mond" target="_self">Auf zum Mond</a></div>
<br />
<div align="center"><span style="color: #666666;">Mond</span></div>
</div>
</div>

CSS

#kategorie{
    margin: auto;
    width: 50%;
    height: 100%;
}
 
#kat1{
    float: left; 
    width: 50%;
    height: 100%;
}
 
#kat2{
    float: right; 
    width: 50%;
    height: 100%;
}
.image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: auto;
  height: 100%;
}

.overlay {
  position: absolute; 
  bottom: 0; 
  background: rgb(240, 77, 5);
  background: rgba(240, 77, 51, 0.9); /* Black see-through */
  color: #f04d33; 
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 18px;
  padding: 20px;
  text-align: center;
}

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