JSFiddle - React, Tailwind, and code Playground

HTML

<h4 style="text-align: center;">Wählen Sie</h4>
<div class="row">
<div class="container"><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 class="container"><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

* {box-sizing: border-box;}

.container {
  position: relative;
  width: 50%;
  max-width: 300px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

.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;
}