<main>
<ul>
<li style="--x1: 2; --x2: 6; --y1: 1; --y2: 4;">
<a href="https://google.com/" target="_blank">
<img src="https://picsum.photos/600/600?random=1" alt="Random Image 1">
</a>
</li>
<li style="--x1: 6; --x2: 8; --y1: 2; --y2: 4;">
<a href="https://google.com/" target="_blank">
<img src="https://picsum.photos/600/600?random=2" alt="Random Image 2">
</a>
</li>
<li style="--x1: 1; --x2: 4; --y1: 4; --y2: 7;">
<a href="https://example.com/3" target="_blank">
<img src="https://picsum.photos/600/600?random=3" alt="Random Image 3">
</a>
</li>
<li style="--x1: 4; --x2: 7; --y1: 4; --y2: 7;">
<a href="https://example.com/4" target="_blank">
<img src="https://picsum.photos/600/600?random=4" alt="Random Image 4">
</a>
</li>
<li style="--x1: 7; --x2: 9; --y1: 4; --y2: 6;">
<a href="https://example.com/5" target="_blank">
<img src="https://picsum.photos/600/600?random=5" alt="Random Image 5">
</a>
</li>
<li style="--x1: 2; --x2: 4; --y1: 7; --y2: 9;">
<a href="https://example.com/6" target="_blank">
<img src="https://picsum.photos/600/600?random=7" alt="Random Image 6">
</a>
</li>
<li style="--x1: 4; --x2: 7; --y1: 7; --y2: 10;">
<a href="https://example.com/7" target="_blank">
<img src="https://picsum.photos/600/600?random=8" alt="Random Image 7">
</a>
</li>
<li style="--x1: 7; --x2: 10; --y1: 6; --y2: 9;">
<a href="https://example.com/8" target="_blank">
<img src="https://picsum.photos/600/600?random=9" alt="Random Image 8">
</a>
</li>
</ul>
</main>
<style>
@import url("https://unpkg.com/open-props/open-props.min.css");
@import url("https://unpkg.com/open-props/normalize.min.css");
*,
*:after,
*:before {
box-sizing: border-box;
}
body {
display: grid;
place-items: center;
min-height: 100vh;
font-family: 'Google Sans', sans-serif, system-ui;
width: 100vw;
overflow-x: hidden;
background: var(--surface-2);
}
ul {
--big-tile-size: 50vmin;
--scale: 1.0;
--tile-size: calc(var(--big-tile-size) / 3);
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 1vmin;
grid-template: repeat(9, var(--tile-size)) / repeat(9, var(--tile-size));
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(var(--scale));
}
li {
padding: 0;
position: relative;
background: hsl(0, 0%, 75%, 0.2);
border-radius: var(--radius-2);
overflow: hidden;
grid-column: var(--x1) / var(--x2);
grid-row: var(--y1) / var(--y2);
}
a {
display: block;
height: 100%;
width: 100%;
}
img {
height: 100%;
width: 100%;
object-fit: cover;
opacity: 1; /* Keep all images visible */
transition: transform 0.3s ease; /* Smooth transition */
}
img:hover {
transform: scale(1.1) translateY(-5%); /* Pop-out effect */
}
@media (max-width: 600px) {
ul {
grid-template: repeat(4, 1fr); /* 4 columns on small screens */
}
}
@media (max-width: 400px) {
ul {
grid-template: repeat(2, 1fr); /* 2 columns on very small screens */
}
}
</style>
<script>
const images = document.querySelectorAll('img');
let currentIndex = 0;
// Function to change images
function changeImages() {
images.forEach((img, index) => {
img.style.opacity = index === currentIndex ? '0.5' : '1'; // Dim the current image
});
currentIndex = (currentIndex + 1) % images.length;
}
// Initial call and set interval for auto changing
setInterval(changeImages, 10000); // Change every 10 seconds
</script>
From jh3y / jhey. 
Anyway, you have various things messed up in the posted source. Probably best to correct those and wrap everything properly in a complete HTML doc so people can see and try what it does, or just use your codepen and link to a corrected working example.
That would help most users here, if you want to share something.
2 Likes
It works in CodePen. That is were I had fun trying it. I don’t have enough knowledge to cleanup the code.
If you have the knowledge, you are welcome to change it. When you’re done testing it, share it like I did. 
It won’t work in Codepen, the way you shared it.
Just curious, what would you use?
Amended code with codepen 
Not even sure what that is, but I will try to clean up the code/
See results below.
<main>
<ul>
<li style="--x1: 2; --x2: 6; --y1: 1; --y2: 4;">
<a href="https://google.com/" target="_blank">
<img src="upload://xnCpRT0cuXlPNb0Edb2jbAUg0CW.jpeg" alt="Random Image 1">
</a>
</li>
<li style="--x1: 6; --x2: 8; --y1: 2; --y2: 4;">
<a href="https://google.com/" target="_blank">
<img src="upload://49CG6cYQYKPoNtmCZNMEbkciSwW.jpeg" alt="Random Image 2">
</a>
</li>
<li style="--x1: 1; --x2: 4; --y1: 4; --y2: 7;">
<a href="https://example.com/3" target="_blank">
<img src="upload://4DlCxJS7k8vX3ZvToodWV5Ged6p.jpeg" alt="Random Image 3">
</a>
</li>
<li style="--x1: 4; --x2: 7; --y1: 4; --y2: 7;">
<a href="https://example.com/4" target="_blank">
<img src="upload://p3uD1bBCf5c4GbqbSfuZ3x2yWFd.jpeg" alt="Random Image 4">
</a>
</li>
<li style="--x1: 7; --x2: 9; --y1: 4; --y2: 6;">
<a href="https://example.com/5" target="_blank">
<img src="upload://rF0npeZuaouanjdwNSInSGJeRD1.jpeg" alt="Random Image 5">
</a>
</li>
<li style="--x1: 2; --x2: 4; --y1: 7; --y2: 9;">
<a href="https://example.com/6" target="_blank">
<img src="upload://Avsz1SJXa0sebVHeF5ith1jdehg.jpeg" alt="Random Image 6">
</a>
</li>
<li style="--x1: 4; --x2: 7; --y1: 7; --y2: 10;">
<a href="https://example.com/7" target="_blank">
<img src="upload://kJMxygaXTM9xZ4mtTCl78bGxnFJ.jpeg" alt="Random Image 7">
</a>
</li>
<li style="--x1: 7; --x2: 10; --y1: 6; --y2: 9;">
<a href="https://example.com/8" target="_blank">
<img src="upload://6nb4JjkuA5XFhCbbpF7FUOcYQot.jpeg" alt="Random Image 8">
</a>
</li>
</ul>
</main>
<style>
@import url("https://unpkg.com/open-props/open-props.min.css");
@import url("https://unpkg.com/open-props/normalize.min.css");
*,
*:after,
*:before {
box-sizing: border-box;
}
body {
display: grid;
place-items: center;
min-height: 100vh;
font-family: 'Google Sans', sans-serif, system-ui;
width: 100vw;
overflow-x: hidden;
background: var(--surface-2);
}
ul {
--big-tile-size: 50vmin;
--scale: 1.0;
--tile-size: calc(var(--big-tile-size) / 3);
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 1vmin;
grid-template: repeat(9, var(--tile-size)) / repeat(9, var(--tile-size));
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(var(--scale));
}
li {
padding: 0;
position: relative;
background: hsl(0, 0%, 75%, 0.2);
border-radius: var(--radius-2);
overflow: hidden;
grid-column: var(--x1) / var(--x2);
grid-row: var(--y1) / var(--y2);
}
a {
display: block;
height: 100%;
width: 100%;
}
img {
height: 100%;
width: 100%;
object-fit: cover;
opacity: 1; /* Keep all images visible */
transition: transform 0.3s ease; /* Smooth transition */
}
img:hover {
transform: scale(1.1) translateY(-5%); /* Pop-out effect */
}
@media (max-width: 600px) {
ul {
grid-template: repeat(4, 1fr); /* 4 columns on small screens */
}
}
@media (max-width: 400px) {
ul {
grid-template: repeat(2, 1fr); /* 2 columns on very small screens */
}
}
</style>
<script>
const images = document.querySelectorAll('img');
let currentIndex = 0;
// Function to change images
function changeImages() {
images.forEach((img, index) => {
img.style.opacity = index === currentIndex ? '0.5' : '1'; // Dim the current image
});
currentIndex = (currentIndex + 1) % images.length;
}
// Initial call and set interval for auto changing
setInterval(changeImages, 10000); // Change every 10 seconds
</script>
Amended
Verb, Past tense.
Put right. “a few things had gone wrong, but these had been amended”
In other words. Correct the code and use Codepen
2 Likes
It has become a dear habit of mine to take a look at the forum every morning, skim through posts and see the usual familiar names.
Have a great day, everyone!
Wolfgang
3 Likes