.border {
    position: absolute;
    left: 0;
    top: 0;
    width: 175%;
    height: 175%;
    background-color: #fff;
}

#gallery {
    width: 150%;
    height: 150%;
    position: absolute;

}

.tile {
    position: absolute;
    border-radius: 10px;
}

.tile:hover {
    transform: scale(1.1);
    transition-duration: 200ms;
}

.tile:hover > img {
    transform: scale(1.1);
    transition-duration: 200ms;
    filter: grayscale(0);
    transition: 0.7s filter;
}

.tile > img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: inherit;
    filter: grayscale(1);
    transition: 0.5s filter;
}

.tile:nth-child(1) {
    background-color: #fff;
    height: 14%;
    width: 20%;
    left: 5%;
    top: 5%;
}
.tile:nth-child(2) {
    background-color: #fff;
    height: 14%;
    width: 14%;
    left: 42%;
    top: 12%;
}
.tile:nth-child(3) {
    background-color: #fff;
    height: 18%;
    width: 16%;
    left: 12%;
    top: 34%;
}
.tile:nth-child(4) {
    background-color: #fff;
    height: 14%;
    width: 12%;
    left: 35%;
    top: 40%;
}
.tile:nth-child(5) {
    background-color: #fff;
    height: 16%;
    width: 22%;
    left: 8%;
    top: 70%;
}
.tile:nth-child(6) {
    background-color: #fff;
    height: 24%;
    width: 24%;
    left: 68%;
    top: 8%;
}
.tile:nth-child(7) {
    background-color: #fff;
    height: 16%;
    width: 20%;
    left: 50%;
    top: 74%;
}
.tile:nth-child(8) {
    background-color: #fff;
    height: 24%;
    width: 18%;
    left: 78%;
    top: 42%;
}
.tile:nth-child(9) {
    background-color: #fff;
    height: 10%;
    width: 8%;
    left: 84%;
    top: 84%;
}
.tile:nth-child(10) {
    background-color: #fff;
    height: 14%;
    width: 20%;
    left: 50%;
    top: 50%;
}