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

سلام.
یک 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>

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

@ali.saadat.1386.aa سلام.
برای این مورد باید حداقل کمی دانش جاوا اسکریپت یا جی کوئری رو داشته باشید. با روشی که مهندس امیری گفتند با جاوا اسکریپت بصورت دستی میتونید کار بکنید . یکی دیگه از روش های ساده که البته تو صفحه دیگه ای عکس رو بزرگ میکنید این لینک هست :
https://www.w3schools.com/css/css_image_gallery.asp
حالا اگر با جزئیات بیشتر نیاز دارید باید به اطلاعتون برسونم اون موردی که توی سایت نمونه هست اصطلاحا Image Gallery هست و با یک سرچ ساده هزاران image gallery آماده میتونید پیدا بکنید . من چندین لینک میذارم که ایده کلی رو متوجه باشید و بعد با سلیقه خودتون جستجوی بیشتری انجام بدید.

https://mobirise.com/bootstrap-gallery/jqueryimagegallery.html
https://mobirise.com/bootstrap-gallery/cssimagegallery.html
https://mobirise.com/bootstrap-gallery/
موفق باشید

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

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

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