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;
}
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
