*, *::before, *::after {
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
}
body {
    background-color: black;
    height: 100vh;
    display: grid;
    grid-template: repeat(10, 1fr) / repeat(10, 1fr);
}
.cell {
    width: 100%;
    height: 100%;
    z-index: 2;
}
.cell:nth-child(10n + 1):hover ~ .content {
    --positionX: 0;
}
.cell:nth-child(n + 1):nth-child(-n + 10):hover ~ .content {
    --positionY: 0;
}
.cell:nth-child(10n + 2):hover ~ .content {
    --positionX: 1;
}
.cell:nth-child(n + 11):nth-child(-n + 20):hover ~ .content {
    --positionY: 1;
}
.cell:nth-child(10n + 3):hover ~ .content {
    --positionX: 2;
}
.cell:nth-child(n + 21):nth-child(-n + 30):hover ~ .content {
    --positionY: 2;
}
.cell:nth-child(10n + 4):hover ~ .content {
    --positionX: 3;
}
.cell:nth-child(n + 31):nth-child(-n + 40):hover ~ .content {
    --positionY: 3;
}
.cell:nth-child(10n + 5):hover ~ .content {
    --positionX: 4;
}
.cell:nth-child(n + 41):nth-child(-n + 50):hover ~ .content {
    --positionY: 4;
}
.cell:nth-child(10n + 6):hover ~ .content {
    --positionX: 5;
}
.cell:nth-child(n + 51):nth-child(-n + 60):hover ~ .content {
    --positionY: 5;
}
.cell:nth-child(10n + 7):hover ~ .content {
    --positionX: 6;
}
.cell:nth-child(n + 61):nth-child(-n + 70):hover ~ .content {
    --positionY: 6;
}
.cell:nth-child(10n + 8):hover ~ .content {
    --positionX: 7;
}
.cell:nth-child(n + 71):nth-child(-n + 80):hover ~ .content {
    --positionY: 7;
}
.cell:nth-child(10n + 9):hover ~ .content {
    --positionX: 8;
}
.cell:nth-child(n + 81):nth-child(-n + 90):hover ~ .content {
    --positionY: 8;
}
.cell:nth-child(10n + 10):hover ~ .content {
    --positionX: 9;
}
.cell:nth-child(n + 91):nth-child(-n + 100):hover ~ .content {
    --positionY: 9;
}
.content {
    --positionX: 0;
    --positionY: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.square {
    width: calc(100px + var(--positionX) * 20px);
    height: calc(100px + var(--positionY) * 20px);
    background: white;
    transition: all 0.3s;
}

