<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.
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Fading and Resizing Gallery with Hover Zoom</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* Transparent Page Background */
body {
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
color: #fff; /* White text for readability */
font-family: Arial, sans-serif;
}
/* Flexible Gallery Layout */
.gallery {
display: flex;
flex-wrap: wrap; /* Allows wrapping of items */
gap: 10px;
padding: 20px;
background-color: rgba(255, 255, 255, 0.1); /* Slightly transparent gallery background */
border-radius: 10px;
}
.gallery-item {
background-color: rgba(255, 255, 255, 0.2); /* Transparent white background */
border: 2px solid rgba(255, 255, 255, 0.4);
border-radius: 8px;
overflow: hidden;
position: relative;
flex: 0 0 auto; /* Prevent items from shrinking */
aspect-ratio: 4 / 3; /* Fixed aspect ratio for all containers */
width: auto; /* Width is automatically set by flexbox */
opacity: 1; /* Default visible */
transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out; /* Faster transition */
}
.gallery-item a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover; /* Ensures images fill the container */
background-color: rgba(255, 255, 255, 0.1); /* Transparent background */
border: 1px solid rgba(0, 0, 0, 0.2); /* Subtle border for separation */
transition: transform 0.3s ease; /* Smooth zoom effect on hover */
}
/* Hover Zoom Effect */
.gallery-item:hover img {
transform: scale(1.1); /* Zoom effect */
}
</style>
</head>
<body>
<!-- Gallery Container -->
<div class="container mt-4">
<h1 class="text-center mb-4">Dynamic Fading and Resizing Gallery with Hover Zoom</h1>
<div id="gallery" class="gallery">
<!-- 24 Gallery Items -->
<div class="gallery-item">
<a href="https://example.com/link1" target="_blank">
<img src="https://armingchampions.com/iSource/1.jpg" alt="Placeholder 1">
</a>
</div>
<div class="gallery-item">
<a href="https://example.com/link2" target="_blank">
<img src="https://armingchampions.com/iSource/2.jpg" alt="Placeholder 2">
</a>
</div>
<div class="gallery-item">
<a href="https://example.com/link3" target="_blank">
<img src="https://armingchampions.com/iSource/3.jpg" alt="Placeholder 3">
</a>
</div>
<div class="gallery-item">
<a href="https://example.com/link4" target="_blank">
<img src="https://armingchampions.com/iSource/4.jpg" alt="Placeholder 4">
</a>
</div>
<div class="gallery-item">
<a href="https://example.com/link5" target="_blank">
<img src="https://armingchampions.com/iSource/5.jpg" alt="Placeholder 5">
</a>
</div>
<div class="gallery-item">
<a href="https://example.com/link6" target="_blank">
<img src="https://armingchampions.com/iSource/6.jpg" alt="Placeholder 6">
</a>
</div>
<div class="gallery-item">
<a href="https://example.com/link7" target="_blank">
<img src="https://armingchampions.com/iSource/7.jpg" alt="Placeholder 7">
</a>
</div>
<div class="gallery-item">
<a href="https://example.com/link8" target="_blank">
<img src="https://armingchampions.com/iSource/8.jpg" alt="Placeholder 8">
</a>
</div>
<div class="gallery-item">
<a href="https://example.com/link9" target="_blank">
<img src="https://armingchampions.com/iSource/1.jpg" alt="Placeholder 9">
</a>
</div>
<div class="gallery-item">
<a href="https://example.com/link10" target="_blank">
<img src="https://armingchampions.com/iSource/2.jpg" alt="Placeholder 10">
</a>
</div>
<div class="gallery-item">
<a href="https://example.com/link11" target="_blank">
<img src="https://armingchampions.com/iSource/3.jpg" alt="Placeholder 11">
</a>
</div>
<div class="gallery-item">
<a href="https://example.com/link12" target="_blank">
<img src="https://armingchampions.com/iSource/4.jpg" alt="Placeholder 12">
</a>
</div>
<div class="gallery-item">
<a href="https://example.com/link13" target="_blank">
<img src="https://armingchampions.com/iSource/5.jpg" alt="Placeholder 13">
</a>
</div>
<div class="gallery-item">
<a href="https://example.com/link14" target="_blank">
<img src="https://armingchampions.com/iSource/6.jpg" alt="Placeholder 14">
</a>
</div>
<div class="gallery-item">
<a href="https://example.com/link15" target="_blank">
<img src="https://armingchampions.com/iSource/7.jpg" alt="Placeholder 15">
</a>
</div>
<div class="gallery-item">
<a href="https://example.com/link16" target="_blank">
<img src="https://armingchampions.com/iSource/8.jpg" alt="Placeholder 16">
</a>
</div>
<div class="gallery-item">
<a href="https://example.com/link17" target="_blank">
<img src="https://armingchampions.com/iSource/1.jpg" alt="Placeholder 17">
</a>
</div>
<div class="gallery-item">
<a href="https://example.com/link18" target="_blank">
<img src="https://armingchampions.com/iSource/2.jpg" alt="Placeholder 18">
</a>
</div>
<div class="gallery-item">
<a href="https://example.com/link19" target="_blank">
<img src="https://armingchampions.com/iSource/3.jpg" alt="Placeholder 19">
</a>
</div>
<div class="gallery-item">
<a href="https://example.com/link20" target="_blank">
<img src="https://armingchampions.com/iSource/4.jpg" alt="Placeholder 20">
</a>
</div>
<div class="gallery-item">
<a href="https://example.com/link21" target="_blank">
<img src="https://armingchampions.com/iSource/5.jpg" alt="Placeholder 21">
</a>
</div>
<div class="gallery-item">
<a href="https://example.com/link22" target="_blank">
<img src="https://armingchampions.com/iSource/6.jpg" alt="Placeholder 22">
</a>
</div>
<div class="gallery-item">
<a href="https://example.com/link23" target="_blank">
<img src="https://armingchampions.com/iSource/7.jpg" alt="Placeholder 23">
</a>
</div>
<div class="gallery-item">
<a href="https://example.com/link24" target="_blank">
<img src="https://armingchampions.com/iSource/8.jpg" alt="Placeholder 24">
</a>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
const gallery = document.getElementById("gallery");
function randomSize() {
const items = gallery.querySelectorAll(".gallery-item");
items.forEach(item => {
const randomWidth = Math.floor(Math.random() * (300 - 150 + 1)) + 150; // Random width between 150px and 300px
item.style.flexBasis = `${randomWidth}px`; // Adjusts the width dynamically
});
}
function fadeImagesRandomly() {
const items = gallery.querySelectorAll(".gallery-item");
items.forEach(item => {
const shouldFade = Math.random() > 0.5; // Randomly decide to fade in or out
if (shouldFade) {
item.classList.add("fade-out"); // Fade out
setTimeout(() => {
item.classList.remove("fade-out"); // Fade back in
}, Math.random() * 500 + 200); // Random delay between 0.2-0.7 seconds
}
});
}
function shuffleGallery() {
const items = Array.from(gallery.children);
items.sort(() => Math.random() - 0.5);
items.forEach(item => gallery.appendChild(item));
randomSize(); // Adjust container sizes after shuffling
}
// Shuffle and fade effects every 3 seconds
setInterval(() => {
shuffleGallery();
fadeImagesRandomly();
}, 3000);
// Initial setup on page load
window.addEventListener("DOMContentLoaded", () => {
shuffleGallery();
fadeImagesRandomly();
});
</script>
</body>
</html>