How can I achieve a zoom out to another image transition effect

You'll need a container div, and two child dividers. The first child should handle images zooming/transitioning, the second child should contain your text. Both the images and text dividers should be positioned absolute so they are on top of each other. You can change which span/image are active/visible by applying a specific class to the parent container.

<div class="container">
  <div class="images">
    <img>
    <img>
    <img>
  </div>
  <div class="text">
    <span>TextA</span>
    <span>TextB</span>
    <span>TextC</span>
  </div>
</div>