Recién terminé de generar un efecto con HTML y CSS.
Es el siguiente:
.contenido > section
{
background-color : rgb(16, 100, 16);
border-radius: 20px;
padding : 10px;
margin-right : 200px;
margin-left: 50px;
margin-top : 100px;
color : #fff;
transition-property: box-shadow, background-color;
transition-duration : .3s
}
.contenido > section:hover
{
background-color : rgb(27, 110, 27);
box-shadow : 0px 0px 5px 5px rgb(44, 138, 44);
}
section > h2
{
text-align : center;
}
/* ----------------------------------------------------- Universidades Section */
.category_container
{
height : 20em;
margin : 10px;
padding : 10px;
border-radius : 20px;
overflow : hidden;
transition-property : height;
transition-duration : .5s;
}
.category_name
{
background-color : #0f0;
position : relative;
text-align : center;
display : inline;
border-radius : 20px;
padding : 2em;
border : 5px inset rgb(42, 206, 42);
top : 45%;
left : 45%;
color : #000;
transition-property: left;
transition-duration : .5s;
}
.universities
{
display : inline-flex;
flex-direction : column;
align-items : center;
padding : 2em;
position : relative;
background-color : #0f0;
left : 110%;
border-radius : 20px;
transition-property : left;
transition-duration : .5s;
}
.universities > *
{
margin : 15px;
padding : 10px;
border-radius: 10px;
color : #000;
background-color : rgb(0, 255, 0);
transition-property: background-color, transform;
transition-duration : .3s;
}
.category_container:hover > .universities
{
left : 16em;
}
@media (max-width : 1500px)
{
.category_container:hover > .universities
{
left : 1em;
}
}
.category_container:hover
{
height: 600px;
}
.category_container:hover > .category_name
{
left : -50%;
}
.universities > *:hover
{
background-color : rgb(47, 180, 47);
transform : scale(1.1, 1.1)
}
/* ----------------------------------------------------- Universidades Section */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css.css">
<title>Document</title>
</head>
<body>
<div class="contenido">
<!-- todo: terminar seleccion de universidades, refactorizar, estruxturar paginas de universidades -->
<section id = "primeros_pasos_section">
<h2> Primeros pasos </h2>
</section>
<section id = "universidades_section">
<h2> Universidades </h2>
<div class = "category_container">
<div class="category_name">
Top
</div>
<div class="universities">
<a href = "html_universidades/harvard.html"> Universidad de Harvard (Cambridge, Massachusetts)</a>
<a href = "html_universidades/stanford.html"> Universidad de Stanford (Stanford, California)</a>
<a href = "html_universidades/mit.html"> Instituto Tecnológico de Massachusetts (Cambridge, Massachusetts)</a>
<a href = "html_universidades/california.html"> Universidad de California (Berkeley, California)</a>
<a href = "html_universidades/michigan.html"> Universidad de Michigan (Ann Arbor, Míchigan)</a>
<a href = "html_universidades/washington.html"> Universidad de Washington (Seattle, Washington)</a>
</div>
</div>
<div class = "category_container">
<div class="category_name">
Target
</div>
<div class="universities">
<a href = "html_universidades/harvard.html"> Universidad de Harvard (Cambridge, Massachusetts)</a>
<a href = "html_universidades/stanford.html"> Universidad de Stanford (Stanford, California)</a>
<a href = "html_universidades/mit.html"> Instituto Tecnológico de Massachusetts (Cambridge, Massachusetts)</a>
<a href = "html_universidades/california.html"> Universidad de California (Berkeley, California)</a>
<a href = "html_universidades/michigan.html"> Universidad de Michigan (Ann Arbor, Míchigan)</a>
<a href = "html_universidades/washington.html"> Universidad de Washington (Seattle, Washington)</a>
</div>
</div>
<div class = "category_container">
<div class="category_name">
Safety
</div>
<div class="universities">
<a href = "html_universidades/harvard.html"> Universidad de Harvard (Cambridge, Massachusetts)</a>
<a href = "html_universidades/stanford.html"> Universidad de Stanford (Stanford, California)</a>
<a href = "html_universidades/mit.html"> Instituto Tecnológico de Massachusetts (Cambridge, Massachusetts)</a>
<a href = "html_universidades/california.html"> Universidad de California (Berkeley, California)</a>
<a href = "html_universidades/michigan.html"> Universidad de Michigan (Ann Arbor, Míchigan)</a>
<a href = "html_universidades/washington.html"> Universidad de Washington (Seattle, Washington)</a>
</div>
</div>
</section>
<section id = "requisitos_generales_section">
<h2> Requisitos generales </h2>
</section>
</div>
</body>
</html>
Pues bien, la duda viene en el position: relative
de .universities
.
Se supone que cuando position
es relative
el elemento forma parte del flujo, y cuando es absolute
deja de hacerlo y, por lo tanto, deja de ocupar espacio.
Pues bien, aquí pasa exactamente lo contrario. Cuando es relative
(es decir, como lo puse en el ejemplo) no forma parte del flujo, y cuando es absolute
sí. De hecho, la pagina permite hacer desplazamiento cuando .universities
está "oculto" y su position
es absolute
.
¿Por qué?