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/