Sliding Boxes and Captions with jQuery

Add an extra layer of information to your images with sliding boxes.

This is now a plugin! Check out the announcement post for the Mosaic jQuery plugin. Check theproject page for the latest release notes and features!

The Basic Idea

All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing peek through. Confused? Cue the helpful diagram -

From this basic idea we can play around with animations of the sliding element to either show or cover up the viewing area, thus creating the sliding effect.

Step 1 CSS Foundation Work

Given the basic structure outlined in the helpful image above, we will need to use a little bit of CSS to make it work as intended. The following will make it functional - review my complete stylesheet in the downloadable file. The following defines the viewing window (.boxgrid) and sets the default position for images within it to the top left. This is important to make the overlap while sliding work. Dont forget that overflow:hidden makes this all possible.
view plaincopy to clipboardprint?

1. .boxgrid{ 2. width: 325px; 3. height: 260px; 4. margin:10px; 5. float:left;

6. background:#161613; 7. border: solid 2px #8399AF; 8. overflow: hidden; 9. position: relative; 10. } 11. .boxgrid img{ 12. position: absolute; 13. top: 0; 14. left: 0; 15. border: 0; 16. } If you arent using the semi-transparent captions you are done with CSS move to Step 2.
view plaincopy to clipboardprint?

1. .boxcaption{ 2. float: left; 3. position: absolute; 4. background: #000; 5. height: 100px; 6. width: 100%; 7. opacity: .8; 8. /* For IE 5-7 */ 9. filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); 10. /* For IE 8 */ 11. -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; 12. } Opacity that plays nice in all browsers is a rough topic, educate yourself if you need to. Now well need to set up the default starting point for the caption box. If you want it fully hidden initially, you will want the distance from the top or left to match the height or width of the window (.boxgrid), depending on which direction it will be sliding. You can also have it partially visible initially, as .caption .boxcaption illustrates.
view plaincopy to clipboardprint?

1. 2. 3. 4. 5. 6. 7. 8.

.captionfull .boxcaption { top: 260; left: 0; } .caption .boxcaption { top: 220; left: 0; }

Step 2 Adding the Sliding Animations

This next stage is a matter of choosing which animation suites you, I have included a bunch of preformatted potentials to help you along. Play around with them to find one that fits your needs and style.
view plaincopy to clipboardprint?

1. $(document).ready(function(){ 2. //To switch directions up/down and left/right just place a "" in front of the top/left attribute

3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39.

//Vertical Sliding $('.boxgrid.slidedown').hover(function(){ $(".cover", this).stop().animate({top:'-260px'},{queue:false,duration:300}); }, function() { $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300}); }); //Horizontal Sliding $('.boxgrid.slideright').hover(function(){ $(".cover", this).stop().animate({left:'325px'},{queue:false,duration:300}); }, function() { $(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300}); }); //Diagnal Sliding $('.boxgrid.thecombo').hover(function(){ $(".cover", this).stop().animate({top:'260px', left:'325px'},{queue:false,durati on:300}); }, function() { $(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:3 00}); }); //Partial Sliding (Only show some of background) $('.boxgrid.peek').hover(function(){ $(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160}); }, function() { $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:160}); }); //Full Caption Sliding (Hidden to Visible) $('.boxgrid.captionfull').hover(function(){ $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160}); }, function() { $(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160}); }); //Caption Sliding (Partially Hidden to Visible) $('.boxgrid.caption').hover(function(){ $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160}); }, function() { $(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160}); }); });

Step 3 The HTML

There are a few classes that we created simply as selectors for JQuery. Keep these rules in mind: The div class .cover should be assigned to whatever is doing the sliding/movement. Within the div .boxgrid, the img should always come first.

Heres an example of the HTML I would use for the .captionfull animation:
view plaincopy to clipboardprint?

1. <div class="boxgrid captionfull"> 2. <img src="jareck.jpg"/> 3. <div class="cover boxcaption"> 4. <h3>Jarek Kubicki</h3> 5. <p>Artist<br/><a href="<a class="linkificationext" title="Linkification: http://www.nonsensesociety.com/2009/03/art-by-jarekkubicki/" href="http://www.nonsensesociety.com/2009/03/art-by-jarekkubicki/">http://www.nonsensesociety.com/2009/03/art-by-jarekkubicki/</a>" target="_BLANK">More Work</a></p> </div>

6.

7. </div>

Go Forth and Create

Ive only touched upon a few options you have, these boxes are your canvases, create away. I would encourage you to download the attached files, as it may be easiest to just copy-paste the parts relevant to your project. Be sure to post any questions, thoughts, or cool things youve done in the comments below!