One way to do it with a few changes:
1) background-position, should be "left top", "top", "right top", "left", "center", "right", "bottom left", "bottom center", and "bottom right" to slice the images into 9 pieces.
https://www.w3schools.com/cssref/pr_background-position.asp
2) Since original image's dimensions are 2400 x 1600, set the "background-size" to be smaller, then calculate using calc according to smaller dimensions, say:
width: calc(600px / 3);
height: calc(600px / 3);
3) Set tiles position to be absolute.
4) Designate each tile's absolute positions using top and left.
5) Designate each tile with unique IDs.
6) Use javascript's setInterval and if else statement to change the elements' absolute positions, using each element's id to decide how their top and left attributes should change overtime.
7) In the example I use the button "Click Me" to execute the script, but you can do it with onload or however you want to call the moveElements() function.
<style>
/* The photo resolution: 2400 x 1600 */
.slideshow {
display: grid;
grid-template-rows: auto auto auto;
grid-template-columns: auto auto auto;
}
.tile {
background-image: url(https://unsplash.com/photos/hzgs56Ze49s/download?force=true&w=2400);
background-size: 600px 600px;
/* width: 800px;
height: 533px; */
width: calc(600px / 3);
height: calc(600px / 3);
transform: scale(0.5, 0.5);
position:absolute;
}
.piece1 {
background-position: left top;
grid-row: 1/1;
grid-column: 1/1;
top:0;
left:0;
}
.piece2 {
background-position: top;
grid-row: 1/1;
grid-column: 2/2;
top:0;
left:250;
}
.piece3 {
background-position: right top;
grid-row: 1/1;
grid-column: 3/3;
top:0;
left:500;
}
.piece4 {
background-position: left;
grid-row: 2/2;
grid-column: 1/1;
top:250;
left:0;
}
.piece5 {
background-position: center;
grid-row: 2/2;
grid-column: 2/2;
top:250;
left: 250;
}
.piece6 {
background-position: right;
grid-row: 2/2;
grid-column: 3/3;
top:250;
left:500;
}
.piece7 {
background-position: bottom left;
grid-row: 3/3;
grid-column: 1/1;
top:500;
left:0;
}
.piece8 {
background-position: bottom center;
grid-row: 3/3;
grid-column: 2/2;
top:500;
left:250;
}
.piece9 {
background-position: bottom right;
grid-row: 3/3;
grid-column: 3/3;
top:500;
left:500;
}
</style>
<p><button onclick="moveElements()">Click Me</button></p>
<div class="slideshow">
<div id="topleft" class="tile piece1"></div>
<div id="top" class="tile piece2"></div>
<div id="topright" class="tile piece3"></div>
<div id="left" class="tile piece4"></div>
<div id="center" class="tile piece5"></div>
<div id="right" class="tile piece6"></div>
<div id="bottomleft" class="tile piece7"></div>
<div id="bottomcenter" class="tile piece8"></div>
<div id="bottomright" class="tile piece9"></div>
</div>
<script>
function moveElements() {
var elem1 = document.getElementById("topleft");
var pos1 = 0;
var id1 = setInterval(frame1, 5);
function frame1() {
if (pos1 == 151) {
clearInterval(id1);
} else {
pos1++;
elem1.style.top = pos1 + "px";
elem1.style.left = pos1 + "px";
}
}
var elem2 = document.getElementById("top");
var pos2 = 0;
var id2 = setInterval(frame2, 5);
function frame2() {
if (pos2 == 151) {
clearInterval(id2);
} else {
pos2++;
elem2.style.top = pos2 + "px";
}
}
var elem3 = document.getElementById("topright");
var pos3t = 0;
var pos3l = 500;
var id3 = setInterval(frame3, 5);
function frame3() {
if (pos3t == 151) {
clearInterval(id3);
} else {
pos3t++;
pos3l--;
elem3.style.top = pos3t + "px";
elem3.style.left = pos3l + "px";
}
}
var elem4 = document.getElementById("left");
var pos4 = 0;
var id4 = setInterval(frame4, 5);
function frame4() {
if (pos4 == 151) {
clearInterval(id4);
} else {
pos4++;
elem4.style.left = pos4 + "px";
}
}
// element5, the center tile stays still
var elem6 = document.getElementById("right");
var pos6 = 500;
var id6 = setInterval(frame6, 5);
function frame6() {
if (pos6 == 349) {
clearInterval(id6);
} else {
pos6--;
elem6.style.left = pos6 + "px";
}
}
var elem7 = document.getElementById("bottomleft");
var pos7t = 500;
var pos7l = 0;
var id7 = setInterval(frame7, 5);
function frame7() {
if (pos7t == 349) {
clearInterval(id7);
} else {
pos7t--;
pos7l++;
elem7.style.top = pos7t + "px";
elem7.style.left = pos7l + "px";
}
}
var elem8 = document.getElementById("bottomcenter");
var pos8 = 500;
var id8 = setInterval(frame8, 5);
function frame8() {
if (pos8 == 349) {
clearInterval(id8);
} else {
pos8--;
elem8.style.top = pos8 + "px";
}
}
var elem9 = document.getElementById("bottomright");
var pos9 = 500;
var id9 = setInterval(frame9, 5);
function frame9() {
if (pos9 == 349) {
clearInterval(id9);
} else {
pos9--;
elem9.style.top = pos9 + "px";
elem9.style.left = pos9 + "px";
}
}
}
</script>
