<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);
});
});
This Pen doesn't use any external CSS resources.