style.css

.gallery {
    display: grid;
    grid-template-columns: repeat(3, auto);
    position: relative;
    cursor: pointer;
  }
  
  .gallery > img,
  .gallery::after {
    width: 180px;
    /* control the size */
    aspect-ratio: 1;
    object-fit: cover;
  }
  
  .gallery::after {
    content: "";
    position: absolute;
    outline: 10px solid #FF6B6B;
    box-shadow: 0 0 0 200vmax #000a;
    transform: translate(-50vw, 100%);
    transition: 0.4s cubic-bezier(0.5, -0.45, 0.5, 1.45);
    pointer-events: none;
  }
  
  .gallery:has(img:nth-of-type(1):hover)::after {
    transform: translate(0%, 0%);
  }
  
  .gallery:has(img:nth-of-type(2):hover)::after {
    transform: translate(100%, 0%);
  }
  
  .gallery:has(img:nth-of-type(3):hover)::after {
    transform: translate(200%, 0%);
  }
  
  .gallery:has(img:nth-of-type(4):hover)::after {
    transform: translate(0%, 100%);
  }
  
  .gallery:has(img:nth-of-type(5):hover)::after {
    transform: translate(100%, 100%);
  }
  
  .gallery:has(img:nth-of-type(6):hover)::after {
    transform: translate(200%, 100%);
  }
  
  .gallery:has(img:nth-of-type(7):hover)::after {
    transform: translate(0%, 200%);
  }
  
  .gallery:has(img:nth-of-type(8):hover)::after {
    transform: translate(100%, 200%);
  }
  
  .gallery:has(img:nth-of-type(9):hover)::after {
    transform: translate(200%, 200%);
  }
  
  .gallery:has(img:nth-of-type(odd):hover)::after {
    outline-color: #C7F464;
  }
  
  @supports not (selector(:has(*))) {
    .gallery::after {
      display: none;
    }
  
    .gallery > img {
      filter: grayscale(80%);
      transition: 0.3s;
      outline: 10px solid #0000;
    }
  
    .gallery > img:hover {
      filter: grayscale(0%);
      outline-color: #FF6B6B;
      z-index: 1;
    }
  
    .gallery > img:nth-child(odd):hover {
      outline-color: #C7F464;
    }
  }
  body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-content: center;
    background: #556270;
  }