Panel deslizante
Esta aplicación se puede utilizar para ampliar una información o mostrar datos cuando el ratón pasa por encima de un bloque que actúa como si fuera una portada.
El bloque superior (la portada) puede ser una imagen y bajo ella se oculta un texto explicatio o cualquier otro bloque. al pasar el ratón este bloque oculto comienza a aparecer deslizándose havcia abajo.
El código HTML
Usamos un contenedor con las clases wrapper y una segunda clase que pueser vert para sacar el texto en sentido de vertical o bien hor para que el desplazamiento sea horizontal.
Dentro tenemos un bloque con clase card que contiene los bloques: el visible (portada) y el que se mostrará al pasar el ratón (oculto).
Se puede usar una imagen o cualquier bloque como portada y lo mismo para el bloque oculto.
El código HTML queda:
<div class="wrapper hor">
<div class="card">
<div class="portada"><img src="/imgs/car-green.png" alt=""></div>
<div class="oculto"><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget lectus eget nisl sodales feugiat. Proin auctor commodo nunc, eu sodales dolor venenatis at. Sed laoreet pharetra dolor non euismod.
</p>
</div>
</div>
</div>
El estilo CSS
La clave está en los estilos CSS. Los bloques de portada y oculto tienen posicion absoluta dentro del bloque card. De esta forma podemos moverlo en vertical mediante la propiedad top.
Los bloques portada y oculto, poseen una altura mitad que la del contenedor (wrapper)y ambos etán en el borde superior gracias a la proiedad top: 0.
En portada pongo una imagen cuyo tamaño se ajusta a las dimensiones del bloque contenedor.
La pseudo clase :hover se aplica cuando el ratón está encima del bloque. En ese momento el bloque oculto se desplaza verticalmente hacia abajo hasta quedar en la mitad inferior, pora ello se cambia el valor de top al 50% de la altura del contenedor.
Para lograr animación se usa la prpiedad transition
Puedes ver el resultado aquí
*{
box-sizing: border-box;
font-family: sans-serif;
line-height: 150%;
}
/*Alto del cuadro*/
.wrapper{
height: 200px;
width: 240px;
margin: 0 auto;
}
.wrapper img{
width: 100%;
height: 100%;
}
.card{
position: relative;
width: 100%;
height: 100%;
max-height: 100%;
transition: all 500ms;
border: 1px solid red;
}
.card .portada, .card .oculto{
position: absolute;
width: 100%;
height: 100%;
max-height: 100%;
left: 0;
top: 0;
transition: all 500ms;
}
.card .portada{
background: #E6B3E9;
display:flex;
justify-content: center;
align-items: center;
z-index: 1;
}
.card .oculto{
padding: 0 8px;
border: 1px solid green;
z-index: 0;
}
.card:hover{
box-shadow: 0 0 12px 0px lightgray;
height: 400px;
}
.card:hover .portada{
background: #7a62bb;
}
.wrapper.hor .card:hover .oculto{
left: 100%;
}
.wrapper.vert .card:hover .oculto{
top: 100%;
}
Lo único que ocurre es que al pasar el ratón por encima el bloque oculto se desplaza hacia abajo y queda visible. La única precaución es tomar bien las dimensiones del contenedor wrapper, sobre todo si se usa una imagen para portada.