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