JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<figure>
  <img src="http://ulrichbangert.de/thumbs/2017-09-05_Wernigerode_Schlossgarten_Panorama_th.jpg">  <figcaption>
    <a href="spenden.html">Spenden</a>
    <a href="helfen.html">Helfen</a>
  </figcaption>
</figure>

CSS

figure {
            display: flex;
            flex-direction: row;
          }
          figcaption {
            display: flex;
            flex-direction: column;
            justify-content: center;
          }
          figure img {
              position: relative;
              z-index: 100;
          }
          figcaption a {
            background-color: lightgray;
            padding: 0.5em 0.5em 0.5em 2em;
            margin-top: 0.5em;
            margin-bottom: 0.5em;
            transform: translateX(-1.5em);
            transition: transform 0.2s;
          }
          figcaption a:hover {
            transform: translateX(0em);
          }