Как увеличить изображение и отобразить его внизу страницы ⇐ CSS

[Anonymous]

Я создал веб-страницу с темой «Галерея изображений». Я вставил несколько миниатюр. Теперь я хочу, чтобы всякий раз, когда пользователь нажимает на миниатюру, изображение увеличивалось и отображалось в нижней части страницы.
[img]https://i.sstatic .net/KnwToAhG.png[/img]
Здесь всякий раз, когда я нажимаю на миниатюру выше, я хочу, чтобы изображение отображалось в обведенной части страницы.
Ниже приведен мой код HTML и CSS.HTML -

Код: Выделить всё

Image Gallery




Responsive Image Gallery

[img]1.jpg[/img]
[img]2.jpg[/img]
[img]3.jpg[/img]
[img]4.jpeg[/img]
[img]5.jpg[/img]
[img]6.jpg[/img]
[img]7.jpg[/img]
[img]8.jpg[/img]
[img]9.jpg[/img]
[img]10.jpg[/img]


Copyright - Harsh Jain
Created - 03/07/2024

CSS –

Код: Выделить всё

.FullBody
{
background-image: url('BackgroundImage.jpg');
background-size: cover ;
}
.Heading
{
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: xx-large;
align-content: center;
text-align: center;
color: azure;
height: 100px;
}
.Footer
{
height:40px;
background-color: black;
color: white;
align-content: center;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: medium;
width:100%;
position: fixed;
bottom: 0px;
left:0px;
}
.FooterLeft
{
float: left;
}
.FooterRight
{
float: right;
}
img
{
height:100px;
width:9.78%;
border:2px solid whitesmoke;
border-radius: 2px;
float:left;
}
.AllImages
{
margin-left:10px;
margin-right:10px;
margin-top:2px;
margin-bottom: 2px;
}

Я пробовал искать, но ничего не помогло, все, что мне удалось, — это изменить размер изображений при нажатии.
Одна из ссылок находится здесь.

Подробнее здесь: https://stackoverflow.com/questions/787 ... f-the-page