CSS – All tiles not shown

I am trying to develop a gallery wherin mouse hover shows an image that can be clicked to open. I got everything to work but once I added the links, things got a bit messy. Not It is only showing the last tile. Heres the code for your reference:

HTML:

    <div id="gallery">

    <a href="#"><div class="tile">
      <img src="pictures/6.jpg" />
    </div></a>

    <a href="#"><div class="tile">
      <img src="pictures/10.jpg" />
    </div></a>
    
    <a href="#"><div class="tile">
      <img src="pictures/21.jpg" />
    </div></a>
    
    <a href="#"><div class="tile">
      <img src="pictures/22.jpg" />
    </div></a>
    
    <a href="#"><div class="tile">
      <img src="pictures/23.jpg" />
    </div></a>
    
    <a href="#"><div class="tile">
      <img src="pictures/28.jpg" />
    </div></a>
    
    <a href="#"><div class="tile">
      <img src="pictures/34.jpg" />
    </div></a>
    
    <a href="#"><div class="tile">
      <img src="pictures/35.jpg" />
    </div></a>
    
    <a href="#"><div class="tile">
      <img src="pictures/84.jpg" />
    </div></a>

</div>

CSS:

body {
    background-color: rgb(10, 10, 10);
    height: 100vh;  
    margin: 0px;
    overflow: hidden;
  }

  #gallery {
    height: 140vmax;
    width: 140vmax;  
    position: absolute;
  }

  .tile {
    border-radius: 1vmax;
    position: absolute;
    transition: transform 800ms ease;
  }
  
  .tile:hover {
    transform: scale(1.1);
  }

  
.tile:hover > img {
    opacity: 1;
    transform: scale(1.01);
  }

  
.tile > img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 800ms ease,
      transform 800ms ease;
  }
  
  .tile:nth-child(1) {
    background-color: rgb(255, 238, 88);
    height: 14%;
    width: 20%;
    left: 5%;
    top: 5%;
  }
  
  .tile:nth-child(2) {
    background-color: rgb(66, 165, 245);
    height: 24%;
    width: 14%;
    left: 42%;
    top: 12%;
  }
  
  .tile:nth-child(3) {
    background-color: rgb(239, 83, 80);
    height: 18%;
    width: 16%;
    left: 12%;
    top: 34%;
  }
  
  .tile:nth-child(4) {
    background-color: rgb(102, 187, 106);
    height: 14%;
    width: 12%;
    left: 45%;
    top: 48%;
  }
  
  .tile:nth-child(5) {
    background-color: rgb(171, 71, 188);
    height: 16%;
    width: 32%;
    left: 8%;
    top: 70%;
  }
  
  .tile:nth-child(6) {
    background-color: rgb(255, 167, 38);
    height: 24%;
    width: 24%;
    left: 68%;
    top: 8%;
  }
  
  .tile:nth-child(7) {
    background-color: rgb(63, 81, 181);
    height: 16%;
    width: 20%;
    left: 50%;
    top: 74%;
  }
  
  .tile:nth-child(8) {
    background-color: rgb(141, 110, 99);
    height: 24%;
    width: 18%;
    left: 72%;
    top: 42%;
  }
  
  .tile:nth-child(9) {
    background-color: rgb(250, 250, 250);
    height: 10%;
    width: 8%;
    left: 84%;
    top: 84%;
  }
  
  a {
    text-decoration: none;
    color: white;
  }

JS:

document.addEventListener("DOMContentLoaded", function(event) {

const gallery = document.getElementById("gallery");

window.onmousemove = e => {
  const mouseX = e.clientX,
        mouseY = e.clientY;
  
  const xDecimal = mouseX / window.innerWidth,
        yDecimal = mouseY / window.innerHeight;
  
  const maxX = gallery.offsetWidth - window.innerWidth,
        maxY = gallery.offsetHeight - window.innerHeight;
  
  const panX = maxX * xDecimal * -1,
        panY = maxY * yDecimal * -1;
  
  gallery.animate({
    transform: `translate(${panX}px, ${panY}px)`
  }, {
    duration: 4000,
    fill: "forwards",
    easing: "ease"
  })
}

});

I need all the tile to show at their respective places and if you want to see how it should actually look, you can just remove all the link tags.

It would also be helpful if someone can tell me how I can automate adding new images using an algorithm instead of ‘nth child’.

Thanks in advance!!!

>Solution :

The problem lies in the CSS, in particular the nth-child selector. This selector is counting children of the parent element #gallery, but with your HTML structure where every .tile is wrapped with an <a> tag, every .tile is actually the first and only child of its parent <a> tag.

A better approach would be to apply the .tile class to the <a> tag itself, which would allow the CSS to apply to every individual link as a direct child of #gallery.

In the CSS, you could keep using nth-child() for simplicity, or if you want to have more control, you could also generate classes dynamically (like tile-1, tile-2, etc.) and define styles for those classes.

If you have hundreds of images that you would like to load a JavaScript code similar to this will solve your problem:

window.onload = function() {
  const gallery = document.getElementById("gallery");

  for(let i = 1; i <= 200; i++) {
    const tile = document.createElement("a");
    tile.href = "#";
    tile.classList.add("tile");

    const img = document.createElement("img");
    img.src = `pictures/${i}.jpg`;
    
    tile.appendChild(img);
    gallery.appendChild(tile);
  }
};

I have to point out that this code assumes that .jpg files under the pictures folder is named as 1.jpg, 2.jpg… and so on. If you have a different naming convention, you should alter the img.src=... line accordingly.