How can I add a small delete button to the top right corner of an image, along with a delete event, so that the button appears when the mouse hovers over it and hides when the mouse moves away? I have tried modifying the source code, but I cannot achieve this effect.

[LetAmericaGreatAgain]

private addImagesToGallery(images: IMasonryGalleryImage[]): void { if (!this.grid) { throw Error( 'Grid element is not yet ready, are you trying to add image too soon?' ); }

const imagesWrapper = this.renderer.createElement('span');

images.forEach((image) => {
  const imgDivContainer = this.renderer.createElement('div');
  imgDivContainer.className = 'imgDiv';

  // generate unique image id
  const imageId = this.getImageId();

  // create element
  const imageElem = this.renderer.createElement('img');
  imageElem.setAttribute('id', imageId);
  imageElem.setAttribute('alt', image.alt ? image.alt : 'no description');
  imageElem.setAttribute('src', image.imageUrl);
  // note - images are hidden by default and should be shown only after they are loaded
  imageElem.setAttribute(
    'style',
    `display: block; width: ${this.width}px; margin-bottom: ${this.verticalGutter}px`
  );
  imageElem.className = this.getImageClass();
  imageElem.addEventListener('click', () => {
    this.handleClick(image);
  });

  // store guid with this image
  this.activeImages.push({
    id: imageId,
    image: image,
  });
  this.renderer.appendChild(imgDivContainer, imageElem);

  const deleteIconDiv = this.renderer.createElement('a');
  deleteIconDiv.href = '#';
  const deleteIcon = this.renderer.createElement('img');
  // deleteIcon.setAttribute('id', this.getImageId());
  deleteIcon.setAttribute('src', this.deleteIconBase64);
  deleteIcon.className = 'delete';
  this.renderer.appendChild(deleteIconDiv, deleteIcon);
  this.renderer.appendChild(imgDivContainer, deleteIconDiv);

  // add to dom and mansory & refresh layout
  this.renderer.appendChild(imagesWrapper, imgDivContainer);
});

// add html to dom
this.renderer.appendChild(this.grid, imagesWrapper);

// add images once they are loaded
const imgLoad = imagesLoaded(imagesWrapper);
imgLoad.on('progress', (instance, image) => {
  if (
    image &&
    image.isLoaded &&
    this.msnry &&
    this.msnry.appended &&
    this.msnry.reloadItems
  ) {
    // this.renderer.appendChild(this.grid, image.img);
    // unhide image
    // this.renderer.setStyle(image.img, "display", "block");

    // remove image from gallery
    this.msnry?.addItems?.([image.img]);

    // refresh layout
    this.msnry?.layout?.();
  }
});

}