JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
<li>
 <a href="#AKTION1" ><img src="http://www.learnthe4ps.com/wp-content/uploads/2014/02/Google-Logo.jpg" alt="#" title="Zur Originalgröße"></a>
 <a href="#AKTION2" title="Zer Beschreibung">Test Text</a>
 <a href="#AKTION3"title="Zum Profil">Profile text</a>
</li>
</ul>

CSS

* {
 margin:0;
 padding:0;
 list-style:none;
 text-decoration:none;
}

li {
 position:relative;
 float:left;
}

img {
 display:block;
 float:left;
}

a:nth-child(2) {
 position:absolute;
 top:-9999em;
 left:0;
 right:0;
 padding:10px;
 background:rgba(0,0,0,.5);
 color:#fff;
}
a:nth-child(3) {
 position:absolute;
 bottom:-9999em;
 left:0;
 right:0;
 padding:10px;
 background:rgba(0,0,0,.5);
 color:#fff;
}

li:hover {
 opacity:.8;
}

li:hover a:nth-child(2) {
 top:0;
}
li:hover a:nth-child(3) {
 bottom:0;
}

a:hover {
 background:rgba(0,0,0,.7);
 text-decoration:underline:
}