resizeを使用して画像切り替えプレビュー機能を実装する方法

<div class='picA'>
    <div class='picB'>
        <div 読み取り専用クラス = 'resizeElement'></div>
    </div>
</div>

html{
    背景: #ddd;
    高さ: 100%;
    幅: 100%;
}
.picA {
    背景画像: url(https://z3.ax1x.com/2021/08/17/fhJdpQ.png);
    背景サイズ: カバー;
    幅: 650ピクセル;
    高さ: 340ピクセル;
    境界線: 5px 実線 #f0e5ab;
    境界線の半径: 3px;
    ボックスの影: 0 0 1px #999, -2px 2px 3px rgba(0, 0, 0, 0.2);
    パディング: 0;
    マージン: 1rem 自動;
    位置: 相対的;
    オーバーフロー: 非表示;
}
.picB {
    背景画像: url(https://z3.ax1x.com/2021/08/17/fhJUfg.png);
    背景サイズ: カバー;
    高さ: 340ピクセル;
    位置: 絶対;
    上: 0;
    左: 0;
    最小幅: 0;
    最大幅: 650px;
    ボックスのサイズ: 境界線ボックス;
}
.picB:前{
    内容: "↔";
    位置: 絶対;
    背景: rgba(0, 0, 0, 0.5);
    フォントサイズ: 16px;
    色: 白;
    上: 0;
    右: 0;
    高さ: 100%;
    行の高さ: 340px;
}
.resizeElement{
    サイズ変更: 水平;
    オーバーフロー: スクロール;
    不透明度: 0;
    位置: 相対的;
    上位: 50%;
    左: 0px;
    高さ: 15px;
    最大幅: 650px;
    最小幅: 15px;
    幅: 0;
    カーソル: 移動;
    変換: スケールY(35);
    変換の原点: 中心 中心;
    アニメーション: デルタ 5 秒、通常のイーズインアウト 1 秒。
}
@keyframes デルタ {
    30% {
        幅: 0;
    }
    60% {
        幅: 350ピクセル;
    }
    100% {
        幅: 0;
    }
}