Создание наложения изображений динамически при наведении курсора

Question

Мне было поручено в основном реплицировать функциональность кнопок сохранения Pinterests как расширение Chrome.

Я уже закодировал большую часть расширения, однако у меня возникла проблема с созданием оверлеев для кнопки сохранения.для изображения.

Я пытаюсь использовать это из слушателя при наведении курсора, который автоматически присоединяется ко всем изображениям при загрузке страницы.

Хотя я могу создать оверлейный div и правильно его расположить, он не позиционируется должным образом после прокрутки страницы.

function imageMouseOver(){
    var rect = this.getBoundingClientRect();
    console.log(rect.top, rect.right, rect.bottom, rect.left);
    var customPos = getPosition(this);
    console.log(customPos);
    var pinitDiv = document.createElement("div");
    pinitDiv.setAttribute('id','osmPinit');
    pinitDiv.style.position = 'absolute';
    pinitDiv.style.top = rect.top+'px';
    pinitDiv.style.left = rect.left+'px';
    pinitDiv.style.margin = '10px';
    pinitDiv.style.backgroundColor = 'red';
    pinitDiv.style.zIndex = '1000';
    pinitDiv.append("This is some text");
    document.body.append(pinitDiv);
}

Я попытался использовать детали из getBoundingClientRect () и пользовательскую функцию с именем getPosition.Ниже приведена пользовательская функция

function getPosition(el) {
  var xPos = 0;
  var yPos = 0;

  while (el) {
    if (el.tagName == "BODY") {
      // deal with browser quirks with body/window/document and page scroll
      var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
      var yScroll = el.scrollTop || document.documentElement.scrollTop;

      xPos += (el.offsetLeft - xScroll + el.clientLeft);
      yPos += (el.offsetTop - yScroll + el.clientTop);
    } else {
      // for all other non-BODY elements
      xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
      yPos += (el.offsetTop - el.scrollTop + el.clientTop);
    }

    el = el.offsetParent;
  }
  return {
    x: xPos,
    y: yPos
  };
}