<div class="img-wrapper">
  <div class="big-wrapper">
    <img src="http://placehold.it/300x200" alt="">
  </div>
  <div class="thumb-wrapper">
    <div data-src="http://placehold.it/300x200"></div>
    <div data-src="http://placehold.it/300x200/000"></div>
    <div data-src="http://placehold.it/300x200/0f0"></div>
    <div data-src="http://placehold.it/300x200/f00"></div>
    <div data-src="http://placehold.it/300x200/00f"></div>
  </div>
</div>

.img-wrapper {
  position: relative;
  display: inline-block;
}

.thumb-wrapper {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.thumb-wrapper div {
  width: 60px;
  height: 200px;
}

.thumb-wrapper div:hover {
  border-bottom: 3px solid #000;
}

let twrapper = document.querySelector(".thumb-wrapper");
let main = document.querySelector(".big-wrapper img");

twrapper.addEventListener("mousemove", function (event) {
  main.src = event.target.dataset.src;
});