Sliding Boxes and Captions with jQuery

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 the project 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 –slidebreakdown

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.

If you aren’t using the semi-transparent captions you are done with CSS – move to Step 2.

Opacity that plays nice in all browsers is a rough topic, educate yourself if you need to.

Now we’ll 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.


Step 2 – Adding the Sliding Animations

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

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.

Here’s an example of the HTML I would use for the .captionfull animation:

Go Forth and Create

I’ve 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 you’ve done in the comments below!

Posted Tuesday, March 31st, 2009 · Back to Top

SPONSOR

Add Comment

621 Comments 22 Mentions

  1. açılış balon süsleme Author Editor

    açılış balon süsleme good nice very nice

    ·

  2. home improvment Author Editor

    Thank you, I’ve just been looking for info approximately this topic for ages and yours is the greatest I have discovered till now. However, what about the conclusion? Are you certain about the source?

    ·

  3. açılış balon süsleme Author Editor

    balon süsleme organizasyonu

    ·

  4. açılış balon süsleme Author Editor

    goood nice

    ·

  5. dao tao seo mien phi Author Editor

    You actually make it appear really easy along with your presentation however I in finding
    this topic to be actually one thing which I think
    I might never understand. It seems too complex and extremely extensive for me.
    I am looking forward for your subsequent put
    up, I’ll attempt to get the hold of it!

    ·

  6. ramesh Author Editor

    I’m not sure why but this blog is loading very slow for me. Is anyone else having this problem or is it a problem on my end? I’ll check back later and
    see if the problem still exists.

    ·

  7. Ibrahim Author Editor

    Its Great gallery and simplest one EVER I used..
    Thanks for you ..

    ·

  8. WoW Farming bot Author Editor

    Pretty! This has been an extremely wonderful post.
    Thanks for providing these details.

    ·

  9. Sarah-Jane Author Editor

    Hi! I like your work, but I have a problem with Internet Explorer and Safari. The title is stuck up my image and when I pass my mouse over the title back to its original position or the bottom of the image as an effect of transitions.

    Do you know how I can fix this? Thank you!

    ·

  10. Angelika Author Editor

    I read this piece of writing fully about the difference of hottest and preceding technologies, it’s remarkable article.

    ·

  11. Neel Author Editor

    hey sir, this is amazing tutorial :) very useful ……… thanks :))

    ·

  12. Athar Author Editor

    Cool stuff,got the idea

    ·

  13. mac Author Editor

    thank you this helps me a lot :)

    ·

 

Build Internet by One Mighty Roar. Since 2008.