0
400
ViewsStacking images with Javascript and CSS
I'm using vanilla JS and CSS. I would like to add a pancake (individual PNGs) on top of the previous pancake every time I click on the pancake button (๐ฅ).
However, I'd the pancake to stack on top of each other, instead of flying over the previous. I've tried to do negative margins for the img element in .css, as well as negative height for the
element in .css, but to no success. How can I achieve a neatly stacked pancake?
Current outcome of pancake stack
Desired Outcome
var count = 0;
var imageArray = [
"img/pancake plate 1.png",
"img/pancake straweberry 1.png",
"img/pancake 1.png",
"img/pancake 2.png",
"img/pancake 3.png",
"img/pancake 4.png"
]; // image array oragnised from bottom to top
function addPancake() {
var pancakeImage = document.createElement("img"); // create the <img> tag
pancakeImage.setAttribute("src", imageArray[count]); // insert img src="current item" as <img> src
var insertArea = document.getElementById("pancake-area"); // specify pancake-area <div>
insertArea.insertBefore(document.createElement("br"), insertArea.childNodes[0]); // add <br> before every new image to show the "stacking" effect
insertArea.insertBefore(pancakeImage, insertArea.childNodes[0]); // add pancake image before the previous image
count++;
};* {
background-color: beige;
font-size: 50px;
}
button {
font-size: 200px;
margin-left: 25vw;
}
#pancake-area {
margin-left: 140px;
}
img {
width: 200px;
position: relative;
}<div id="pancake-area">
</div>
<button onclick="addPancake()">๐ฅ</button>1 answers
Answer question0
To get the images in reversed order add display: flex; and flex-direction: column-reverse; to the #pancake-area wrapper. This also removed the need of adding the <br/> tags via javascript, so you can drop that.
To get the overlapping add a negative margin-bottom (e.g -50px but you can adjust that number to your needs). This will make the images overlap from top to bottom.
Note:
I added a fixed height and a border to make them visible in the example as the image paths are broken. You can drop that cause i suppose the image paths are working for you.
var count = 0;
var imageArray = [
"img/pancake plate 1.png",
"img/pancake straweberry 1.png",
"img/pancake 1.png",
"img/pancake 2.png",
"img/pancake 3.png",
"img/pancake 4.png"
]; // image array oragnised from bottom to top
function addPancake() {
var pancakeImage = document.createElement("img"); // create the <img> tag
pancakeImage.setAttribute("src", imageArray[count]); // insert img src="current item" as <img> src
var insertArea = document.getElementById("pancake-area"); // specify pancake-area <div>
insertArea.insertBefore(pancakeImage, insertArea.childNodes[0]); // add pancake image before the previous image
count++;
};* {
background-color: beige;
font-size: 50px;
}
button {
font-size: 200px;
margin-left: 25vw;
}
#pancake-area {
margin-left: 140px;
display: flex;
flex-direction: column-reverse;
}
img {
width: 200px;
position: relative;
margin-bottom: -50px;
/* just for debugging cause image paths are broken: */
height: 100px;
border: 1px dotted red;
}<div id="pancake-area">
</div>
<button onclick="addPancake()">๐ฅ</button>