Da gibt es 1000 Herangehensweisen.
Eine habe ich dir mal auf die Schnelle gebaut:
HTML:
<div class="logo-text-container">
<img class="logo" src="https://via.placeholder.com/400x150.png?text=Logo"/>
<span class="text">Produced by</span>
</div>
CSS:
.logo-text-container{
display: block;
position: relative;
height: 150px;
width: 300px;
}
.text{
position: absolute;
top: 50%;
left: 50%;
transition: all .3s;
}
.logo{
position: absolute;
top: 0;
left: 50%;
z-index: 1;
transition: all .3s;
}
.logo-text-container:hover .logo{
left: 66.6%;
}
.logo-text-container:hover .text{
position: absolute;
top: 50%;
left: 33.3%;
}
Hier kannst du es testen:
https://jsfiddle.net/3d8tpnLv/55/