JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul>
        <li>
            <a href='#'>
                <img src='' alt='' />
                <p>text</p>
            </a>
        </li>
        <li>
            <a href='#'>
                <img src='' alt='' />
                <p>text</p>
            </a>
        </li>
        <li>
            <a href='#'>
                <img src='' alt='' />
                <p>text</p>
            </a>
        </li>
        <li>
            <a href='#'>
                <img src='' alt='' />
                <p>text</p>
            </a>
        </li>
        <li>
            <a href='#'>
                <img src='' alt='' />
                <p>text</p>
            </a>
        </li>
    </ul>
</nav>

CSS

nav {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    text-align: center;
}
nav ul {
    font-size: 12px;
    font-family:'Shift', sans-serif;
    color: #5a5a5a;
    font-weight: lighter;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
nav li {
    margin: 12px;
    display: inline-block;
}

nav p {
    opacity: 0;
    transition: opacity .5s;
}
nav a:hover p {
    opacity: 1;
}

/* dummy code, just to simulate the images */
img {
    width: 100px;
    height: 45px;
    background: #ccc;
}