JSFiddle - React, Tailwind, and code Playground

HTML

<div class='content animate-top'>
    <img src='http://s8.hostingkartinok.com/uploads/images/2015/11/1dbd4188b24fdcdef03ea3c5d4149e2f.jpg' alt='Картинка' />
    <ul class='menu'>
        <li><a href='#'>Москва</a></li>
        <li><a href='#'>Екатеринбург</a></li>
        <li><a href='#'>Питербург</a></li>
    </ul>
</div>

<div class='content animate-topright'>
    <img src='http://s8.hostingkartinok.com/uploads/images/2015/11/1dbd4188b24fdcdef03ea3c5d4149e2f.jpg' alt='Картинка' />
    <ul class='menu'>
        <li><a href='#'>Москва</a></li>
        <li><a href='#'>Екатеринбург</a></li>
        <li><a href='#'>Питербург</a></li>
    </ul>
</div>

<div class='content animate-right'>
    <img src='http://s8.hostingkartinok.com/uploads/images/2015/11/1dbd4188b24fdcdef03ea3c5d4149e2f.jpg' alt='Картинка' />
    <ul class='menu'>
        <li><a href='#'>Москва</a></li>
        <li><a href='#'>Екатеринбург</a></li>
        <li><a href='#'>Питербург</a></li>
    </ul>
</div>

<div class='content animate-bottomright'>
    <img src='http://s8.hostingkartinok.com/uploads/images/2015/11/1dbd4188b24fdcdef03ea3c5d4149e2f.jpg' alt='Картинка' />
    <ul class='menu'>
        <li><a href='#'>Москва</a></li>
        <li><a href='#'>Екатеринбург</a></li>
        <li><a href='#'>Питербург</a></li>
    </ul>
</div>

<div class='content animate-bottom'>
    <img src='http://s8.hostingkartinok.com/uploads/images/2015/11/1dbd4188b24fdcdef03ea3c5d4149e2f.jpg' alt='Картинка' />
    <ul class='menu'>
        <li><a href='#'>Москва</a></li>
        <li><a href='#'>Екатеринбург</a></li>
        <li><a href='#'>Питербург</a></li>
    </ul>
</div>

<div class='content animate-bottomleft'>
    <img src='http://s8.hostingkartinok.com/uploads/images/2015/11/1dbd4188b24fdcdef03ea3c5d4149e2f.jpg' alt='Картинка' />
    <ul class='menu'>
        <li><a href='#'>Москва</a></li>
        <li><a href='#'>Екатеринбург</a></li>
        <li><a href='#'>Питербург</a></li>
    </ul>
</div>

<div...

CSS

.content {
    display: inline-block;
    overflow: hidden;
    position: relative }
    .content img {
        display: block;
        width: 140px;
        height: 100px;
        border: 1px solid #ccc }
    .content:hover .menu {
        top: 0;
        bottom: 0 }
    .content .menu {
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        position: absolute;
        left: 0;
        top: 100%;
        right: 0;
        transition: all 0.3s linear;
        bottom: -100%;
        margin: 0;
        padding: 0;
        background: rgba(0,0,0,0.5);
        list-style: none }
        .content .menu li {
            display: block;
            flex: 0 0 100%;
            text-align: center }
            .content .menu li a {
                color: white;
                text-decoration: none }
                .content .menu li a:hover {
                    text-decoration: underline }
/* Анимации */
.animate-topleft:hover .menu,
.animate-top:hover .menu,
.animate-topright:hover .menu,
.animate-right:hover .menu,
.animate-bottomright:hover .menu,
.animate-bottom:hover .menu,
.animate-bottomleft:hover .menu,
.animate-left:hover .menu {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0 }
/* Меню выдвигаеться слева сверху */
.animate-topleft .menu {
    left: -100%;
    top: -100%;
    right: 100%;
    bottom: 100% }
/* Меню выдвигаеться сверху */
.animate-top .menu {
    left: 0;
    top: -100%;
    right: 0;
    bottom: 100% }
/* Меню выдвигаеться слева сверху */
.animate-topright .menu {
    left: 100%;
    top: -100%;
    right: -100%;
    bottom: 100% }
/* Меню выдвигаеться справа */
.animate-right .menu {
    left: 100%;
    top: 0;
    right: -100%;
    bottom: 0 }
/* Меню выдвигаеться снизу */
.animate-bottom .menu {
    left: 0;
    top: 100%;
    right: 0;
    bottom: -100% }
/* Меню выдвигаеться слева сверху */
.animate-bottomright .menu {
    left: 100%;
    top: 100%;
    right: -100%;
    bottom: -100% }
/* Меню...