Adding hover over image to zoom to Sweet Alerts Embedded HTML

Question

Swal.fire({
    type: 'success',
    title: 'Please verify document',
    html: `
        <div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
            <embed src="${reader.result}" width="250"/> &nbsp;
            <div class="my-2">
                The NIC is:&nbsp;
                <input type="text" class="form-style form-control" id="nic" placeholder="NIC No" 
                    style="text-align: center; width:170px; font-weight: bold;" maxlength="12">
            </div>
        </div>`,
    confirmButtonText: 'OK',
    focusConfirm: false,
    allowOutsideClick: false,
    width: 800,
    onOpen: function () {
        (<HTMLInputElement>Swal.getPopup().querySelector('#nic')).value = NICDATA;
    },
    preConfirm: () => {
        const nic = (<HTMLInputElement>Swal.getPopup().querySelector('#nic')).value;
        // Need to add validation to check whether the nic is correct before click OK
        if (!nic) {
            Swal.showValidationMessage(`Please enter NIC no`)
        }
        return { nic: nic }
    }
}).then((result) => {
    if (result.value) {
        this.nicNo = `${result.value.nic}`;
        sessionStorage.removeItem("NICNO");
        sessionStorage.setItem("NICNO", `${result.value.nic}`);
        this.upload();
    } else if (result.dismiss == Swal.DismissReason.cancel) {
        this.fileUploadEvent.target.value = null;
    }
});

Need to add hover over image zoom function to embedded HTML of this Swal, similar to this : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_image_zoom . How can i do this?

Tried adding the JS and CSS inside Swal, bit didn't work