JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">Наведи на меня</div>
<div class="wrap">
    
    <div class="logo-1"></div>
    <div class="logo-2"></div>
</div>

CSS

.wrap {
    position: relative;
    margin: 50px;
    font-family: sans-serif;
    color: #999;
}
.logo-1,
.logo-2 {
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    height: 184px;
    width: 544px;
}
.logo-1 {
    background: url(https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png);
}
.logo-2 {
    width: 0;
    background-image: url(http://itc.ua/wp-content/uploads/2014/10/Yandex-logo-671x362.png);
    background-position: -70px -43px;
    transition: all 2s ease;
}
.wrap:hover .logo-2 {
    width: 544px;
}