I have this code that displays 2 grids of images (the images are small sections of a larger picture). Currently the grids are displayed at the top and underneath on a page – I want to superimpose them. The second grid images (‘frontlayer’) are partially transparent.
<html><head>
<style>
.backlayer {
width: 100vmin;
height: 100vmin;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
gap: 1v0min;
}
.backlayer>* {
border: 0 solid;
background-image: var(--bg);
background-size: cover;
background-position center center;
}
.frontlayer {
width: 100vmin;
height: 100vmin;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 1v0min; position: absolute
}
.frontlayer>* {
border: 1v0min solid;
background-image: var(--bg);
background-size: cover;
background-position center center;
}
</style>
</head><body>
<div class="backlayer"></div>
<div class="frontlayer"></div>
<script language="javascript">
const backlayer = document.querySelector('.backlayer');
const numberOfItems = 16;
for (let row = 0; row < 4; row++) {
for (let col = 0; col < 4; col++) {
let cell = document.createElement('div');
cell.classList.add('cell');
backlayer.appendChild(cell);
}
}
const cells = backlayer.querySelectorAll('.cell');
for (let i = 0; i < numberOfItems; i++) {
var xpos = i%4;
var ypos = (i-xpos)/4;
var myurl = "url(https://picsum.photos/id/1015/200/200?"+("X"+xpos)+"/"+("Y"+ypos)+")";
cells[i].style.setProperty('--bg', myurl);
}
// below section for top transparent layer
const frontlayer = document.querySelector('.frontlayer');
const numberOfItems2 = 4;
for (let row = 0; row < 2; row++) {
for (let col = 0; col < 2; col++) {
let cell = document.createElement('div');
cell.classList.add('cell');
frontlayer.appendChild(cell);
}
}
const cells2 = frontlayer.querySelectorAll('.cell');
for (let i = 0; i < numberOfItems2; i++) {
xpos = i%2;
ypos = (i-xpos)/2;
var myurl2 = "url(https://picsum.photos/id/1016/200/200?"+("X"+xpos)+"/"+("Y"+ypos)+")";
cells2[i].style.setProperty('--bg', myurl2);
}
</script>
</body>
</html>
Might not be the best HTML there so I apologise about that but it does work, just can’t seem to position the two grids over each other. There is plenty of examples here how to do this with single static images but nothing that deals with the grid aspect and I just can’t figure out how to change the existing examples to work with my situation.
TIA, Pete