<div class="frame">
  <div class="img-container">
  </div>
</div>

body {
  background: radial-gradient(circle at 10% 20%, rgb(226, 240, 254) 0%, rgb(255, 247, 228) 90%);
}

.frame {
  width: 400px;
  height: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.img-container {
  display: flex;
  flex-wrap: wrap;
}

.img-container img {
  width: 190px;
  height: 190px;
  
  margin: 4px;
  
  cursor: pointer;
  
  border: 1px solid rgba(136, 93, 241, 0.2);
  border-radius: 15px;
}

.img-container img:hover {
  opacity: 0.5;
}

const picturesLinksArray = ["https://cdn.pixabay.com/photo/2020/10/29/03/22/dog-5695088_1280.png", "https://cdn.pixabay.com/photo/2022/02/20/09/43/animal-7024108_1280.png", "https://cdn.pixabay.com/photo/2022/02/20/09/36/animal-7024080_1280.png", "https://cdn.pixabay.com/photo/2022/02/20/09/34/animal-7024072_1280.png"
];

const imgContainer = document.querySelector(".img-container");

picturesLinksArray.map((link) => {
  const image = document.createElement("img");
  image.src = link;
  imgContainer.appendChild(image);
})