JSFiddle - React, Tailwind, and code Playground

HTML

<span class="hover_img">
  Text 1<br>
  Text 1<br>
  Text 1<br>
  Text 1<br>
  <img src="https://avatars.mds.yandex.net/get-pdb/467185/078a5008-00b6-4eed-a9ab-d36bae8ea903/s375">
</span>
<span class="hover_img">
  Text 2<br>
  Text 2<br>
  Text 2<br>
  Text 2<br>
  Text 2<br>
  <img src="https://avatars.mds.yandex.net/get-pdb/216365/a9585181-301e-4e1f-a471-266bba57292b/s375">
</span>

CSS

.hover_img{
  display:inline-block;
  cursor:pointer;
}
.hover_img img{
  position:absolute;
  height:100px;
  display:none;
}
.hover_img:hover img{
  display:inline-block;
}

JavaScript

ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false

function init() {
    if (ns4) {document.captureEvents(Event.MOUSEMOVE);}
    document.onmousemove=mousemove;
}
function mousemove(event) {
    var mouse_x = 0;
    var mouse_y = 0;
    if (document.attachEvent != null) {
        mouse_x = window.event.clientX;
        mouse_y = window.event.clientY;
    } else if (!document.attachEvent && document.addEventListener) {
        mouse_x = event.clientX;
        mouse_y = event.clientY;
    }
    
    var elements = document.querySelectorAll('.hover_img img');
    for (var i = 0; i < elements.length; i++) {
      elements[i].style.left = mouse_x+'px';
      elements[i].style.top = mouse_y+'px';
    }
}
init();