Ayuda con FLEXBOX

Como puedo hacer que funcione el :hover en las .paginas sin que los demás se muevan. Deberia poner position: absolute a las .paginas, relativas al recuadro gris (que es el grid)?
gracias

Tampoco quiero que se muevan los contenedores gris y rojo cuando aplico el :hover
como hago todo esto?

Parale de mover en el verical:
cambia
max-height: 400px;
para
height: 300px

El horizontal es mas dificil porqe cada vez que cambias el tamano del border todo es recalculado.
harais mejor optar para un valor de anchura y cambiar la opacidade o el color

.paginas{
  background-color: green;
  border: 4px solid rgba(0, 0, 0, .5);
  transition: 0.4s;
}
.paginas:hover{
  border: 4px solid rgba(0,0, 0, 1);
  transition: 0.4s;
}
1 Like

Pero también tienes razón, y también buscar más alternativas
Gracias @damianicely

También he creído conveniente probar a crear <div> que sea como un cuadrito o punto, para hacerlo position: relative;, y los logos vayan position: absolute; y ¡funciona!
Es importante poner estos cuadritos de referencia justo en medio. Para ello he puesto los logos a 10px y luego, a 100px he calculado cual seria su equivalencia para estar en el centro. Y ya esta. Cada uno tiene su espacio propio, y los logos se moveran dentro de ese espacio. Esto no cambiará ningun margin ni padding de fuera y no afectará al resto de la página. @damianicely

image
luego, rbga(128, 128, 128, 0)
image