Basic principles
These dynamic sliding boxes are based on the same basic principle. The DIV tag with ".boxgrid" acts as a window after you pass the other two items in the object you want to "peep" into. Not sure? Let this picture give you a clue:
After understanding this basic principle, we can use the animation effect of sliding elements to uncover or cover the area to be displayed to create a sliding effect.
Click to preview the effect Download the source files for this example
Step One – CSS Basics
In the above inspiration diagram that gives the basic structure, we need to use a little CSS to make it display the desired effect. The following CSS defines the viewing window (.boxgrid) and sets the default POSITION of the image in LEFT and TOP, which is very important for overlapping explanations when sliding. And don't forget that overflow:hidden will make this possible.
.boxgrid{
width: 325px;
height: 260px;
margin:10px;
float:left;
background:#161613;
border: solid 2px #8399AF;
overflow: hidden;
position: relative;
}
.boxgrid img{
position: absolute;
top: 0;
left: 0;
border: 0;
}
If you are not ready to use CSS to achieve translucent description, you can jump directly to the second step:
.boxcaption{
float: left;
position: absolute;
background: #000;
height: 100px;
width: 100%;
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
Now, we need to set the default starting point for the caption box (I think layers are better than boxes). If you want it to be completely hidden when initialized, you will need to set TOP and LEFT to the height and width of your window (.boxgrid), which (of course) is determined by the direction you want to slide. You can also have it show only part of it on initialization, as given by this (CSS-defined) .caption and .boxcaption:
.captionfull .boxcaption {
top: 260;
left: 0;
}
.caption .boxcaption {
top: 220;
left: 0;
}
Source: Happy Favorites