Text transition effect

Question

I would like to make an effect that when the user hovers over the frame the background would turn white, coming from left to right first, and once that effect was complete the text would also appear from left to right. I tried to do this, but to no avail.

.overlay-hover {width: 300px}
.overlay-hover {cursor: pointer;position: relative;}
.title-transition {background-color: #fff;width: 100%;height: 100%;position: absolute;top: 0;right: 0;transition: all 500ms 500ms;}
.overlay {background-color: #fff;width: 0;height: 100%;transition: all 500ms;}
.overlay-hover:hover .overlay {width: 100%;}
.overlay-hover:hover .title-transition {width: 0%;}

<div class="overlay-hover">
    <span style="width: 100%;height: 200px;background-image: url('https://picsum.photos/200');background-size:cover;backgound-position:center;display: block;">			
        <div class="overlay">
          <h3>Lorem ipsum</h3>
          <div class="title-transition"></div>
        </div>
    </span>
</div>

EDITE

The effect should happen in 3 steps:

1: The block should appear in this format:

2: After the user passes the mouse the first effect appears:

2.1: Running the first effect:

2.2: End of first effect:

3: The second effect shall arise after the first is complete:

3.1 Implementation of the second effect:

3.2: Second full effect:

Answer 1

His CSS was a bit confused, I preferred to make a version from scratch to be more didactic. I left the color in yellow just for easy viewing, but then you put the colors you want.

EDITE

After the author made some observations I changed the code. Now position absolute in the children of container and left and width along with a delay inverted in :.

Notice in this sequence that in "going" the text has a delay of 500ms, and in "turn" is the image that has a delay of 500ms

.overlay h3 {
  transition: 1s width 0ms;
}
.overlay:hover h3 {
  transition: 1s width 500ms;
}
.overlay img {
  transition: 1s left 500ms;
}
.overlay:hover img {
  transition: 1s left 0ms;
}

Follow the image above:

.overlay {
    width: 200px;
    height: 100px;
    overflow: hidden;
    position: relative;
}
.overlay h3 {
  position: absolute;
  display: inline-block;
  white-space: nowrap;
  width: 0;
  overflow: hidden;
  top: 0;
  left: 0%;
  color: #000;
  transition: 1s width 0ms;
}
.overlay:hover h3 {
  width: 100%;
  transition: 1s width 500ms;
}
.overlay img {
  position: absolute;
  top: 0;
  left: 0;
  transition: 1s left 500ms;
}
.overlay:hover img {
  left: 100%;
  transition: 1s left 0ms;
}

  

<div class="overlay">
  <img src="https://placecage.com/200/100">
  <h3>Lorem ipsum</h3>
</div>

---

Option 2

Here the effect is done with a background with linear gradiente, he has 200% of the width of the container, so you have two halves of 100% of the width of the container, and with the background-position you move this gradient giving the impression that it is a overlay

After that just put one transition in the text with delay, so he comes in 500ms after the background moved, already to return I removed the delay, ai they return to position of correct form without overlapping one another

.overlay {
    width: 200px;
    height: 100px;
    background-image: linear-gradient(to right, #ff0 0%, #ff0 50%, #f00 50%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    background-position: 100% 0%;
    transition: 1s background-position;
    overflow: hidden;
}
.overlay:hover {
    background-position: 0% 0%;
}
h3 {
  display: inline-block;
  width: 100%;
  margin-left: -100%;
  transition: 1s margin-left ;
}
.overlay:hover h3 {
  margin-left: 0%;
  transition: 1s margin-left 500ms;
}

<div class="overlay">
  <h3>Lorem ipsum</h3>
</div>