Friends, I have the following code
In the current effect when I hover the hover effect changes the background and increases the proportions of the div up to beauty, however I would like the effect did not mess with the other divs, in the current effect if I hover over the first element the others from the right move.
How to fix it? causing the other divs not to move when I hover the other elements.
Thank you!
@Patrique Alves,
Initially your CSS contains an error property at the very beginning:
*{
margin: 0;
padding: 0;
box-sizing:
}
... should look like this:
*{
margin: 0;
padding: 0;
box-sizing: 0;
}
Following this move 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 setting the movement will be restricted to each object.
For the expected effect I believe to be what is missing in CSS ".nav li: hover". Change the code as below and test. With me it worked pretty much like 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 have helped.
Getting it right now is as I'd like.