Gostaria de fazer um efeito que quando o usuário passe o mouse por cima do quadro o fundo ficasse branco, vido da esquerda para a direita primeiramente, e assim que esse efeito ficasse completo o texto aparecesse também vindo da esquerda para a direita. Tentei fazer isto, mas sem sucesso.
.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
O efeito deverá acontecer em 3 passos:
1: O bloco deve aparecer deste formato:
2: Após o usuário passar o mouse o primeiro efeito aparece:
2.1: Executando o primeiro efeito:
2.2: Fim do primeiro efeito:
3: O segundo efeito deve surgir após o primeiro estar completo:
3.1 Execução do segundo efeito:
3.2: Segundo efeito completo: