JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <ul class="brands-logo">
        <li><a href="#" class="logo1"><img src="http://i.cubeupload.com/xVnWmm.png" alt="" /><img src="http://i.cubeupload.com/iIhqoQ.png" alt="" /></a></li>
        <li><a href="#" class="logo2"><img src="http://i.cubeupload.com/ZmAdgv.png" alt="" /><img src="http://i.cubeupload.com/LrnHaY.png" alt="" /></a></li>
    </ul>
    <div style="clear: both;"></div>
</header>

CSS

header {
    background: #666;
    border-bottom: 2px solid #939393;
}

.brands-logo {
    text-align: center;
}

.brands-logo li {
    float: left;
    text-align: center;
    vertical-align: bottom;
    width: 50%;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.brands-logo li img {
    width: 100%;
}

.brands-logo li img:last-child {
    display: none;
}

.brands-logo li a:hover img:last-child {
    display: inline-block;
}

.brands-logo li a:hover img:first-child {
    display: none;
}