So implementieren Sie die Vorschaufunktion zum Wechseln von Bildern mithilfe der Größenänderung

<div Klasse='BildA'>
    <div Klasse='BildB'>
        <div schreibgeschützte Klasse = 'resizeElement'></div>
    </div>
</div>

html {
    Hintergrund: #ddd;
    Höhe: 100%;
    Breite: 100 %;
}
.BildA {
    Hintergrundbild: URL (https://z3.ax1x.com/2021/08/17/fhJdpQ.png);
    Hintergrundgröße: Abdeckung;
    Breite: 650px;
    Höhe: 340px;
    Rand: 5px durchgezogen #f0e5ab;
    Rahmenradius: 3px;
    Boxschatten: 0 0 1px #999, -2px 2px 3px rgba(0, 0, 0, 0,2);
    Polsterung: 0;
    Rand: 1rem automatisch;
    Position: relativ;
    Überlauf: versteckt;
}
.BildB {
    Hintergrundbild: URL (https://z3.ax1x.com/2021/08/17/fhJUfg.png);
    Hintergrundgröße: Abdeckung;
    Höhe: 340px;
    Position: absolut;
    oben: 0;
    links: 0;
    Mindestbreite: 0;
    maximale Breite: 650px;
    Box-Größe: Rahmenbox;
}
.picB:vor {
    Inhalt: "↔";
    Position: absolut;
    Hintergrund: rgba(0, 0, 0, 0,5);
    Schriftgröße: 16px;
    Farbe: weiß;
    oben: 0;
    rechts: 0;
    Höhe: 100%;
    Zeilenhöhe: 340px;
}
.resizeElement {
    Größe ändern: horizontal;
    Überlauf: scrollen;
    Deckkraft: 0;
    Position: relativ;
    oben: 50 %;
    links: 0px;
    Höhe: 15px;
    maximale Breite: 650px;
    Mindestbreite: 15px;
    Breite: 0;
    Cursor: bewegen;
    transformieren: scaleY(35);
    Transform-Origin: Mitte Mitte;
    Animation: Delta 5 s, normales Ein- und Ausfahren 1 s;
}
@keyframes delta {
    30% {
        Breite: 0;
    }
    60 % {
        Breite: 350px;
    }
    100 % {
        Breite: 0;
    }
}