I am currently learning with html and css and little bit of javascript. I am entirely self-taught. So most of my code could seem off as amateurish.

Anyway, I made a CSS Grid with a specific layout filled out nicely with different content. There is basically only one div left. I want to know, if it is possible to place multiple images on top of each other. I have drawn and edited the images myself and just to make sure, I used them in a different "throw-away-code". There were no problems.

The user should be able to click on a button inside the div and the images switches. Image 1 is the default. User presses the button and image 1 disappears and image 2 comes next and so on... until it starts again with Image 1. Something very similar to an image gallery.

The images I have drawn are some sort of explanatory guide to my website, I want to use.

I am just unsure, if it even possible, since my knowledge is greatly lacking regarding java script. I am not asking for the solution, but which method would be the first step to do that.

I started with a basic HTML and CSS code (I only chose those position values, so I can see the images on top of each other)

HTML

<div class="box">

  <div class="img1 image-collection">
    Image 1
  </div>

  <div class="img2 image-collection">
    Image 2
  </div>  

  <div class="img3 image-collection">
    Image 3
  </div>  

</div>

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;
}

CodePudding user response：

Here is a solution you are looking for, feel free to change images/classes;

let activeImage =0;// starting image
let allImages = $('.single-image'); // image container class
function nextphoto(){
  activeImage = activeImage   1;
  if(activeImage> $(allImages).length -1){
    activeImage = 0;
  }
  $('.single-image').removeClass('active-image');
  $(allImages).eq(activeImage).addClass('active-image');
}
function previousphoto(){
  activeImage = activeImage - 1;
  if(activeImage<0){
    activeImage = $(allImages).length - 1;
  }
  $('.single-image').removeClass('active-image');
  $(allImages).eq(activeImage).addClass('active-image');
}

img{
max-width:100%;
height:auto;
max-height:100%;
}
.image-collection{
max-width:100px;
position:relative;
min-width:100px;
min-height:100px;
max-height:100px;
overflow:hidden;
}
.buttons{
margin-top:1em;
}
.single-image{
position:absolute;
left:0;
top:0;
opacity:0;
width:100%;
height:100%;
transition:opacity 0.1s ease-in-out;
}
.active-image{
opacity:1!important;
}
.buttons span{
  cursor:pointer;
  display:inline-block;
  background:black;
  color:white;
  margin-left:1em;
  margin-right:1em;
  padding:0.5em;
  font-size:0.8em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="image-collection">
<div class="single-image active-image">
  <img src="https://images.unsplash.com/photo-1526336024174-e58f5cdd8e13?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80">
</div>
<div class="single-image">
  <img src="https://images.unsplash.com/photo-1548247416-ec66f4900b2e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=840&q=80">
</div>
<div class="single-image">
  <img src="https://images.unsplash.com/photo-1561948955-570b270e7c36?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=601&q=80">
</div>
</div>
<div class="buttons">
<span onclick="previousphoto();">Previous</span>
<span onclick="nextphoto();">Next</span>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>