[SOLUCIONADO] Divs desplegables al poner el mouse encima

[bERTUZ]

Buenos días,

Quiero dividir la pantalla en 4 divs verticales, 25% cada uno. Al poner el mouse encima de cualquiera de ellos, el div se amplía (con un efecto) hasta ocupar el 100% de la pantalla.

¿Es esto posible? Muchas gracias! :)

[pzin]

Se puede hacer.

Suponiendo que tengas una estructura parecida a esta:

Código HTML:

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>
 

Debe de haber un contenedor —section en este caso, aunque podría hacerse con body también— para poder poner las demás capas no seleccionadas a cero altura, ya que el selector de hermanos + es siempre descendiente. Luego para animarlo con transition como es habitual.

Código CSS:

div {
  height: 25%;
  transition: height .5s;
}
 
section:hover div {
  height: 0;
  overflow: hidden;
}
 
section:hover div:hover {
  height: 100%;
}
 

Subí un ejemplo funcional a jsbin.

[bERTUZ]

Muchísimas gracias por tu respuesta Bonez! (y gracias por el ejemplo funcional)

Es exactamente lo que necesitaba! Saludos :)