Principios básicos
Estas cajas deslizantes dinámicas se basan en el mismo principio básico. La etiqueta DIV con ".boxgrid" actúa como una ventana después de pasar los otros dos elementos del objeto que desea "mirar". ¿No estás seguro? Deja que esta imagen te dé una pista:
Después de comprender este principio básico, podemos utilizar el efecto de animación de elementos deslizantes para descubrir o cubrir el área que se mostrará para crear un efecto deslizante.
Haga clic para obtener una vista previa del efecto. Descargue los archivos fuente para este ejemplo.
Paso uno: conceptos básicos de CSS
En el diagrama de inspiración anterior que brinda la estructura básica, necesitamos usar un poco de CSS para que muestre el efecto deseado. El siguiente CSS define la ventana de visualización (.boxgrid) y establece la POSICIÓN predeterminada de la imagen en IZQUIERDA y ARRIBA, lo cual es muy importante para explicaciones superpuestas al deslizar. Y no olvides que overflow:hidden hará que esto sea posible.
.boxgrid{
ancho: 325 px;
altura: 260 píxeles;
margen: 10px;
flotador: izquierda;
antecedentes:#161613;
borde: sólido 2px #8399AF;
desbordamiento: oculto;
posición: relativa;
}
.boxgrid img{
posición: absoluta;
arriba: 0;
izquierda: 0;
borde: 0;
}
Si no está listo para usar CSS para lograr una descripción translúcida, puede pasar directamente al segundo paso:
.boxcaption{
flotador: izquierda;
posición: absoluta;
fondo: #000;
altura: 100 píxeles;
ancho: 100%;
opacidad: .8;
/* Para IE 5-7 */
filtro: progid:DXImageTransform.Microsoft.Alpha(Opacidad=80);
/* Para IE 8 */
-Filtro MS: "progid:DXImageTransform.Microsoft.Alpha(Opacidad=80)";
}
Ahora, necesitamos establecer el punto de partida predeterminado para el cuadro de título (creo que las capas son mejores que los cuadros). Si desea que esté completamente oculto cuando se inicialice, deberá configurar ARRIBA e IZQUIERDA en la altura y el ancho de su ventana (.boxgrid), que (por supuesto) está determinada por la dirección en la que desea deslizarse. También puede hacer que muestre solo una parte en la inicialización, como lo indican estos .caption y .boxcaption (definidos por CSS):
.captionfull .boxcaption {
arriba: 260;
izquierda: 0;
}
.caption .boxcaption {
arriba: 220;
izquierda: 0;
}
Fuente: Favoritos felices