بزرگ نمایی تصویر بعد از کلیک

سلام.
یک div با position برابر با fixed ایجاد کنید و داخلش عکس رو قرار بدید و برای عکس thumbnail یه صفت (مثلا data-large-image) قرار بدید و وقتی رو عکس کوچیکتر کلیک میکنید اون مقدار که برابر با آدرس عکس بزرگتر هست بگیرید و بذارید داخل ادرس عکس بزرگتر:

//thumbnail image tag

<img id='thumbnailImag' src='your Addres' data-large-image-address='your large image address'>

//large image tag

<img src='' id='largeImage'>

<script>

let thumbnailImage=document.getElementById('thumbnailImage');
let largeImage=document.getElementById('larageImage');

thumbnailImage.addEventListener('click',function(){

let largeImageSrc=this.getAttribute('data-large-image-address');

largeImage.src=src;
})

</script>

میشه بیشتر توضیح بدید؟

به اینجور نمایش عکس ها میگن جعبه نور Lightbox (Modal Image Gallery) که میتونید از کتابخانه های آماده براش استفاده کنید.

مثال از پیاده سازی: https://www.w3schools.com/howto/howto_js_lightbox.asp

این هم مفیده: https://www.w3schools.com/howto/howto_css_modal_images.asp
البته برای مقصود شما نیاز به تغییرات و ایجاد پویایی هستش.