JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <nav>
        <ul>
            <li><a href="#">f</a></li>
            <li><a href="#">t</a></li>
            <li><a href="#">p</a></li>
        </ul>
    </nav>
    <span>Image</span>
</div>
<div>
    <nav>
        <ul>
            <li><a href="#">f</a></li>
            <li><a href="#">t</a></li>
            <li><a href="#">p</a></li>
        </ul>
    </nav>
    <span>Image</span>
</div>
<div>
    <nav>
        <ul>
            <li><a href="#">f</a></li>
            <li><a href="#">t</a></li>
            <li><a href="#">p</a></li>
        </ul>
    </nav>
    <span>Image</span>
</div>

CSS

body {font: 1em sans-serif;color: #fff;}
div {overflow: hidden;position: relative;width: 204px;margin-bottom: 5px;}
div:hover nav {top: 0;}
span {display: inline-block;padding: 60px 80px;background: #484848;}
nav {position: absolute;top: -30px;background: #333;transition:top .3s ease;}
ul {margin: 0;padding: 5px 15px;}
li {display: inline-block;vertical-align: top;}
a {color: #fff;}