Нужна помощь в создании галереи ⇐ CSS

[Anonymous]

Я пытаюсь создать галерею на веб-сайте, над которым работаю для школы. Я испробовал множество разных методов и способов сделать это, ни один из них не дает мне того, что я хочу.
/>Я попробовал все способы, предоставляемые школами w3, и ни один из них не работает так, как я хочу, или по какой-либо причине они выходят за рамки оболочки.
В настоящее время я так и делаю. пытаюсь заставить изображения, которые у меня есть в сетке, увеличиваться, когда вы нажимаете на них, и быть можно щелкнуть/провести пальцем в сторону, чтобы перейти к следующему изображению, как мне это сделать?
это код, который у меня есть
HTML

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

[url=img/jinxedfinalpg.png]
[img]img/jinxedfinalpg.png[/img]
[/url]
Add a description of the image here


[url=img/jinxedfinalpg.png]
[img]img/jinxedfinalpg.png[/img]
[/url]
Add a description of the image here


[url=img/jinxedfinalpg.png]
[img]img/jinxedfinalpg.png[/img]
[/url]
Add a description of the image here


[url=img/jinxedfinalpg.png]
[img]img/jinxedfinalpg.png[/img]
[/url]
Add a description of the image here

CSS

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

.grid-container {
display: grid;
grid-template-columns: 1fr;
grid-gap: 0%;
}
.gallery {
margin: 2%;
border: 1px solid #ccc;
}
.gallery:hover {
border: 1px solid #777;
color: blueviolet;
}
.gallery img {
width: 100%;
height: auto;
}
.desc {
padding: 1%;
text-align: center;
}

в настоящее время, если вы нажмете на изображение, оно просто откроет новую вкладку, а это не то, что мне нужно.


Подробнее здесь: https://stackoverflow.com/questions/792 ... -a-gallery