Como colocar 2 imagens em 1 unico espaço | Front-end

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>