缩放比例时避免网格重叠

Question

问题： play.code-it.net

我有这个网格，我将其设置为在悬停时将比例转换为1.25。问题在于，当一个元素“被转换”时，它会与它旁边的元素重叠。

我该如何解决？

CSS：（网格是.games类，所有网格元素都在.game类中）code-it.net/custom/css/jogos.css

HTML：

<div class="games">     
    <a onclick="gameWindow(640, 400, 960); selectedGame='pong';">
        <div id="pong" class="game" search="pong" style="transition: all .1s ease-in-out;"></div></a>

    <a onclick="gameWindow(640, 400, 960); selectedGame='dama';">
        <div id="dama" class="game" search="dama" style="transition: all .1s ease-in-out;"></div></a>

    <a onclick="gameWindow(640, 400, 960); selectedGame='forca';">
        <div id="forca" class="game" search="forca" style="transition: all .1s ease-in-out;" ></div></a>

    <a onclick="gameWindow(640, 400, 960); selectedGame='pacman';">
        <div id="pacman" class="game" search="pacman" style="transition: all .1s ease-in-out;"></div></a>

    <a onclick="gameWindow(640, 400, 960); selectedGame='math';">
        <div id="quick-math" class="game" search="quick math" style="transition: all .1s ease-in-out;"></div></a>

    <a onclick="gameWindow(640, 400, 960); selectedGame='fut-mesa';">
        <div id="fut-mesa" class="game" search="futebol de mesa" style="transition: all .1s ease-in-out;"></div></a>
</div>