<div class="gallery">
  <div class="preview">
    <img src="https://habrastorage.org/webt/uu/hb/hg/uuhbhguu5bzqqgifdladiwmqfci.jpeg" alt="">
  </div>
  <div class="gallery-list">
    <a href="https://habrastorage.org/webt/uu/hb/hg/uuhbhguu5bzqqgifdladiwmqfci.jpeg" class="item">
      <img src="https://habrastorage.org/webt/uu/hb/hg/uuhbhguu5bzqqgifdladiwmqfci.jpeg" alt="">
    </a>
    <a href="https://habrastorage.org/webt/y8/pa/id/y8paidhequyr0n6zzaqeqa-lv7m.jpeg" class="item">
      <img src="https://habrastorage.org/webt/y8/pa/id/y8paidhequyr0n6zzaqeqa-lv7m.jpeg" alt="">
    </a>
    <a href="https://habrastorage.org/webt/ay/mo/hk/aymohkxemhfoi9ewcjc-wqgyvu0.jpeg" class="item">
      <img src="https://habrastorage.org/webt/ay/mo/hk/aymohkxemhfoi9ewcjc-wqgyvu0.jpeg" alt="">
    </a>
  </div>
</div>
<div class="gallery">
  <div class="preview">
    <img src="https://habrastorage.org/webt/uu/hb/hg/uuhbhguu5bzqqgifdladiwmqfci.jpeg" alt="">
  </div>
  <div class="gallery-list">
    <a href="https://habrastorage.org/webt/uu/hb/hg/uuhbhguu5bzqqgifdladiwmqfci.jpeg" class="item">
      <img src="https://habrastorage.org/webt/uu/hb/hg/uuhbhguu5bzqqgifdladiwmqfci.jpeg" alt="">
    </a>
    <a href="https://habrastorage.org/webt/y8/pa/id/y8paidhequyr0n6zzaqeqa-lv7m.jpeg" class="item">
      <img src="https://habrastorage.org/webt/y8/pa/id/y8paidhequyr0n6zzaqeqa-lv7m.jpeg" alt="">
    </a>
    <a href="https://habrastorage.org/webt/ay/mo/hk/aymohkxemhfoi9ewcjc-wqgyvu0.jpeg" class="item">
      <img src="https://habrastorage.org/webt/ay/mo/hk/aymohkxemhfoi9ewcjc-wqgyvu0.jpeg" alt="">
    </a>
  </div>
</div>
.gallery {
  margin-bottom: 2rem;
  .preview {
    img {
      width: 200px;
      height: 160px;
    }
  }
  &-list {
    display: flex;
    gap: 5px;
  }
  .item {
    img {
      width: 100px;
      height: 80px;
    }
  }
}
View Compiled
$(".gallery").each(function () {
  const $gallery = $(this);
  const $largeImg = $gallery.find(".preview img");
  $gallery.mouseover(function (event) {
    const thumbnail = event.target.closest(".item");
    if (!thumbnail) return;

    $largeImg.attr("src", thumbnail.href);
    $largeImg.attr("alt", thumbnail.title);
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js