css transitions not working for css grid-column and grid-row properties?

I want to add a transition when the mouse hover the item. i tried using the CSS transition property but it dose not working. My code is simple what i wanted to do is, i have four squares when hover one of them i should cover the other three and take the size of all four squares.
(eg: for a portfolio)

Check my code below i found it easy to do with css grid layout but im new to css grid. Can someone tell what is wrong with my code or alternative to do my task.thank you

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Portfolio test</title>
        <style>
            *{
                padding: 0;
                margin: 0;
                text-decoration: none;

            }
            #cover {
                display: grid;
                height: 100vh;
                grid-template-columns: repeat(4,1fr);
                grid-template-rows: 100px auto auto 100px;
                grid-gap: 5px;
                grid-template-areas: 
                ". . . ."
                ". item_1 item_2 ."
                ". item_3 item_4 ."
                ". . . ."
            }
            .item {
                transition: all 5s ease;
                text-align: center;
                vertical-align: middle;
                font-size: 5em;
            }

            .item:nth-child(1) {
                grid-area: item_1;
                background-color: aqua
            }
            .item:nth-child(2) {
                grid-area: item_2;
                background-color: gray;
            }
            .item:nth-child(3) {
                grid-area: item_3;
                background-color: lightgreen;
            }
            .item:nth-child(4) {
                grid-area: item_4;
                background-color: lightsalmon;
            }

           .item:hover {

               grid-column: 2 / 4;
               grid-row: 2 / 4;
               /* width: 200%; */
               z-index: 1000;

            }
        </style>
    </head>
    <body>
        <div id="cover">
            <div class="item">One</div>
            <div class="item">Two</div>
            <div class="item">Three</div>
            <div class="item">Four</div>
        </div>
    </body>
    </html>

1 answer

  • answered 2018-02-13 02:18 Jonny

    I added a width for your items. Then for the item hover I added a width, height, position absolute, transition, and a margin to center it. On hover we make the container cover the width of all 4.

    The CSS

    <style type="text/css">
    *{
    padding: 0;
    margin: 0;
    text-decoration: none;
    }
    #cover {
    display: grid;
    height: 100vh;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: 100px auto auto 100px;
    grid-gap: 5px;
    grid-template-areas: 
    ". . . ."
    ". item_1 item_2 ."
    ". item_3 item_4 ."
    ". . . ."
    }
    .item {
    width:100%;
    text-align: center;
    vertical-align: middle;
    font-size: 5em;
    }
    
    .item:nth-child(1) {
    grid-area: item_1;
    width:80%;
    background-color: aqua;
    transition:ease-in-out 1s;
    margin-left:10%;
    }
    .item:nth-child(2) {
    grid-area: item_2;
    background-color: gray;
    transition:ease-in-out 1s;
    width:80%;
    margin-left:10%;
    }
    .item:nth-child(3) {
    grid-area: item_3;
    background-color: lightgreen;
    transition:ease-in-out 1s;
    width:80%;
    margin-left:10%;
    }
    .item:nth-child(4) {
    grid-area: item_4;
    background-color: lightsalmon;
    transition:ease-in-out 1s;
    width:80%;
    margin-left:10%;
    }
    
    .item:hover {
    grid-column: 2 / 4;
    grid-row: 2 / 4;
    width:80%;
    height:80%;
    position:absolute;
    top: 0px;
    z-index: 1000;
    transition:ease-in-out 1s;
    margin-left:10%;
    opacity:0.7;
    }
    </style>
    

    The HTML

    <body>
    <div id="cover">
    <div class="item">One</div>
    <div class="item">Two</div>
    <div class="item">Three</div>
    <div class="item">Four</div>
    </div>
    </body>
    

    Note the opacity is their so you can see the behavior. You can remove it to get rid of the transparency of the container. Hope it helps.