Могу ли я накладывать несколько изображений друг на друга и переключаться между ними? HTML, CSS, Java-скрипт ⇐ CSS

[Anonymous]

В настоящее время я изучаю HTML и CSS и немного JavaScript. Я полностью самоучка. Поэтому большая часть моего кода может показаться дилетантской.
В любом случае, я создал CSS Grid с определенным макетом, красиво наполненным различным контентом. По сути, остался только один div. Я хочу знать, можно ли разместить несколько изображений друг на друге. Я сам нарисовал и отредактировал изображения и на всякий случай использовал их в другом «выбрасываемом коде». Проблем не возникло.
Пользователь должен иметь возможность нажать кнопку внутри div, и изображения переключятся. Изображение 1 используется по умолчанию. Пользователь нажимает кнопку, и изображение 1 исчезает, а затем появляется изображение 2 и так далее... пока все не начнется снова с изображения 1. Что-то очень похожее на галерею изображений.
Изображения, которые у меня есть нарисованы своего рода пояснительное руководство к моему веб-сайту, которое я хочу использовать.
Я просто не уверен, возможно ли это вообще, поскольку мне очень не хватает знаний о Java-скриптах. Я не спрашиваю о решении, а о том, какой метод будет первым шагом для этого.
Я начал с базового кода HTML и CSS (я выбрал только эти значения позиции, поэтому я изображения могут видеться друг над другом)
HTML



Image 1

Image 2

Image 3



CSS
body {
margin: 100px;
padding: 0;
height: 100%;
background-color: #111416;
color: #dfdfdf;
position: relative;
}

.image-collection {
width: 1200px;
height: 900px;
background-size: cover;
background-repeat: no-repeat;

}

.img1 {
background-image: url(../Images/example1.jpg);
position: absolute;
top: 10px;
left: 90px;
}

.img2 {
background-image: url(../Images/example2.jpg);
position: absolute;
top: 60px;
left: 180px;
}

.img3 {
background-image: url(../Images/example3.jpg);
position: absolute;
top: 110px;
left: 270px;
}


Подробнее здесь: https://stackoverflow.com/questions/699 ... -them-html