Oi Thiago.
Fiz essa solução - uma div com a primeira imagem, dentro dessa div mais uma div contendo a segunda.
Essa segunda div tem metade da largura e está posicionada com position:absolute. Coloquei uma transition nela de width.
Criei as classes anima1 (width 0) e anima2 (width 100);
Com o jquery, coloquei um hover nos textos abaixo, que adicionam e removem essas classes da segunda div.
Segue o código. Qualquer dúvida, pode mandar aí.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.caixa1{
position: relative;
width: 800px;
height: 600px;
}
.caixa2 {
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 600px;
overflow: hidden;
transition: width ease-in 0.5s;
}
.anima1 {
width: 0;
}
.anima2 {
width: 800px;
}
.botoes {
width: 100%;
display: flex;
justify-content: space-evenly;
}
#animacao1, #animacao2 {
cursor: pointer;
}
</style>
<div class="caixa1">
<img src="imagem.png" alt="" class="img1">
<div class="caixa2">
<img src="imagem2.png" alt="" class="img2">
</div>
</div>
<div class="botoes"> <span id="animacao1">Animação1</span>
<span id="animacao2">Animação2</span> </div>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script>
$('#animacao1').hover(function() {
$('.caixa2').toggleClass('anima1');
});
$('#animacao2').hover(function() {
$('.caixa2').toggleClass('anima2');
});
</script>
</body>
</html>
