Css Hover Transition

Question

Friends, I have the following code

https://codepen.io/narrador/pen/vWbrPr

In the current effect when I move the mouse the Hover effect changes the background and increases the proportions of the div until then beauty, however I would like the effect not to mess with the other Ivs, in the current effect if I pass the mouse over the first element the others on the right move.

How to fix it? Making other Ivs not move when I give a Hover in the other elements.

Thank you!

Answer 1

Can fix it, now it’s as I would like.

https://codepen.io/narrador/pen/LOqJeY

Answer 2

@Patrique Alves,

Initially your CSS contains an error property right at the beginning:

    *{
        margin: 0;
        padding: 0;
        box-sizing:
     }

...should look like this:

    *{
        margin: 0;
        padding: 0;
        box-sizing: 0;
     }

Following, this movement is due to the tag "li" being with different values; see:

    .nav li{
        ...
        width: 145px;
        height: 150px;
        ...
    }

    .nav li:hover{
        ...
        width: 145px; /* Deve ficar igual ao ".nav li {...}" */
        height: 150px;  /* Deve ficar igual ao ".nav li {...}" */
        ...
    }

With this adjustment the movement will be restricted to each object.

To that end believe be what is missing in CSS ". Nav li:Hover". Change the code as below and test. With me it worked very similar to what you need.

    .nav li:hover{
        opacity:1;
        /*width:155px;*/
        height:160px;
        background:rgba(11, 132, 138, 0.7);
        z-index: 2;
        -webkit-transition: all 200ms ease-in;
        -webkit-transform: scale(1.5);
        -ms-transition: all 200ms ease-in;
        -ms-transform: scale(1.5);   
        -moz-transition: all 200ms ease-in;
        -moz-transform: scale(1.5);
        transition: all 200ms ease-in;
        transform: scale(1.5);
    }

I hope I’ve helped.