動畫網(wǎng)格區(qū)域。

我想動畫網(wǎng)格區(qū)域的方式，當(dāng)一個(gè)元素被點(diǎn)擊/懸停，它應(yīng)該改變網(wǎng)格-是在一種方式和其他元素在另一種方式。挑戰(zhàn)在于，用過渡或動畫是不可能做到的。提供我的html和css。

html:

<div class="container  banner">
        <div class="banner-text">
            <h1>Travel to <br> your dream <br> destination</h1>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque quae hic similique labore, veritatis porro dicta doloribus corporis beatae consectetur.</p>
        </div>
        <div class="banner-grid">
            <div class="banner-grid-element">
                <img src="https://source.unsplash.com/g-krQzQo9mI" alt="">
            </div>
            <div class="banner-grid-element">
                <img src="https://source.unsplash.com/jWKk-0ZBUyg" alt="">
            </div>
            <div class="banner-grid-element">
                <img src="https://source.unsplash.com/nnzkZNYWHaU" alt="">
            </div>
            <div class="banner-grid-element">
                <img src="https://source.unsplash.com/5iQWgow3_S0" alt="">
            </div>
            <div class="banner-grid-element">
                <img src="https://source.unsplash.com/mt-fuji-n--CMLApjfI" alt="">
            </div>
            <div class="banner-grid-element">
                <img src="https://source.unsplash.com/9PJ6Cmi--j4" alt="">
            </div>
        </div>
    </div>


css:
.banner-grid {
    height: 95%;
    width: 65%;
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    grid-template-rows: repeat(12, 1fr);
    gap: 10px;
}

.banner-grid-element {
    border-radius: 10px;
    cursor: pointer;
}
.banner-grid-element:first-child{
    grid-area: 5/1/12/4;
    transition: grid-area 0.5s ease;
}
.banner-grid-element:first-child:hover{
    grid-area: 1/1/13/4;
}

.banner-grid-element:nth-child(2){
    grid-area: 1/2/5/11;
}

.banner-grid-element:nth-child(3){
    grid-area: 5/4/9/7;
}
.banner-grid-element:nth-child(4){
    grid-area: 5/7/9/11;
}
.banner-grid-element:nth-child(5){
    grid-area: 9/4/13/11;
}
.banner-grid-element:nth-child(6){
    grid-area: 2/11/13/14;
}