JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<ul class="mh-menu">
    <li>
        <a href="#"><span>Мы несём добро в сеть</span> <span>APO-UCOZ.COM</span></a>
        <img src="http://tympanus.net/TipsTricks/CSS3MenuHoverEffect/images/1.jpg" alt="image01" />
    </li>
    <li>
        <a href="#"><span>Production Coordinator</span> <span>Francis Morgan</span></a>
        <img src="http://tympanus.net/TipsTricks/CSS3MenuHoverEffect/images/2.jpg" alt="image02" />
    </li>
    <li>
        <a href="#"><span>Sound</span> <span>Kevin Schneider</span></a>
        <img src="http://tympanus.net/TipsTricks/CSS3MenuHoverEffect/images/3.jpg" alt="image03" />
    </li>
    <li>
        <a href="#"><span>Casting</span> <span>Benjamin Zakalis</span></a>
        <img src="http://tympanus.net/TipsTricks/CSS3MenuHoverEffect/images/4.jpg" alt="image04" />
    </li>
</ul>

CSS

.mh-menu {
    height: 385px;
    width: 600px;
    margin-left: 0px;
    position: relative;
}
.mh-menu li {
    width: 300px;
    list-style:none;
}
.mh-menu li a {
    display: block;
    width: 280px;
    padding: 0px 10px;
    text-align: right;
    position: relative;
    z-index: 10;
    background: #fff;
    height: 97px;
    border-right: 1px solid #ddd;
    background-color: rgba(255, 255, 255, 0.8);
    text-decoration:none;
}
.mh-menu li:nth-child(1):hover a {
    background-color: rgba(174, 54, 55, 0.9);
}
.mh-menu li:nth-child(2):hover a {
    background-color: rgba(195, 210, 67, 0.9)
}
.mh-menu li:nth-child(3):hover a {
    background-color: rgba(211, 132, 57, 0.9);
}
.mh-menu li:nth-child(4):hover a {
    background-color: rgba(142, 116, 99, 0.9);
}
.mh-menu li a span {
    display:block;
}
.mh-menu li a span:first-child {
    font-weight: 700;
    font-size: 16px;
    color: #ddd;
    padding-top: 10px;
    font-family:'Alegreya SC', Georgia, serif;
}
.mh-menu li a span:nth-child(2) {
    font-weight: 400;
    font-style: italic;
    font-size: 28px;
    font-family:'Alegreya SC', Georgia, serif;
    -webkit-transition: color 0.2s linear;
    -moz-transition: color 0.2s linear;
    -o-transition: color 0.2s linear;
    -ms-transition: color 0.2s linear;
    transition: color 0.2s linear;
}
.mh-menu li:hover span:nth-child(2) {
    color: #fff;
}
.mh-menu li img {
    position: absolute;
    z-index: 1;
    left: 0px;
    top: 0px;
    opacity: 0;
    -webkit-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
    -moz-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
    -o-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
    -ms-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
    transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
.mh-menu li:hover img {
    left: 300px;
    opacity: 1;
}