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 651 Mentions

  1. Karl Author Editor

    Hi, it was all working well until I wanted to put some clickable image buttons beneath the ‘peek’ image, but now my buttons just show on top of the image image instead of getting revealed behind it :(

    ·

  2. Karl Author Editor

    never mind, it was because i had the “cover” before by button images.

    ##### Also, dont put your real email address in this comment box, the day after i had 4 emails bounce back from spam sent out using my address, i’ve had nothing in the 5/6 years before using this site. #####

    ·

  3. Carpet Cleaning Miami Author Editor

    Some quick tips for common CSS issues and how to avoid easy pitfalls during your CSS coding process.

    ·

  4. Helen Author Editor

    Awesome, Thank you :)

    ·

  5. manoj Author Editor

    hi

    ·

  6. Eileen Author Editor

    Hi, is there any demo or download files?

    ·

  7. ZR Author Editor

    not working=(

    ·

  8. Dan Author Editor

    I am able to get the effect I’m looking for in all browsers but IE. When I open the page in IE 8 specifically I get a warning blocking all scripts or Active X controls. Any ideas why this is happening?

    ·

    • joe Author Editor

      I found that it was because of the alpha channel filter css property. Strange… Just remove:

      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80)
      -MS-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=80)”

      You won’t have transparency in IE but it will not throw the warning/block.

      ·

  9. Pino Author Editor

    thanks! will try it now!

    ·

  10. Wczasy Author Editor

    Hi
    thanks!

    ·

  11. Dien dan SEO Author Editor

    Thanks for this article, I can use for future projects

    ·

  12. Idris Author Editor

    really interesting and useful…thank you for sharing!!!

    ·

  13. josan Author Editor

    Nice tutorial and very useful for my homepage

    ·

  14. SEO Bod Author Editor

    Great gallery, easy to follow tutorial also. I’ll be using these galleries again and again, thanks.

    ·

  15. raj Author Editor

    hi,
    this nice…

    ·

  16. centrifuge in india Author Editor

    excellent thats very nice effects found here

    ·

  17. Dalin UM Author Editor

    that very cool buddy

    ·

  18. led ekran Author Editor

    thnx for sharing

    ·

  19. Robin Author Editor

    this is great it’s work fine with me in firefox thanks

    ·

    • görüntülüsohbet Author Editor

      Well done I really like your site so I wanted to write a comment will be happy thank you Happy New Year..

      ·

      • Jamie hutber Author Editor

        Its a very simple concept but works well.

        I’m wondering if I can’t take the x,y cords and then use this as my photo cropper, this mixed with PHP of course.

        ·

  20. glenn Author Editor

    excellent stuff,loved it and works in ie.

    ·

  21. Golf Author Editor

    Thank

    ·

  22. Nigeria Web design Author Editor

    WOW thanks for the toutorial. I’ll be trying that out on my project.

    ·

  23. King Author Editor

    this would make a excellent featured slider, thanks!

    ·

  24. how to get a free ipad 2 no offers Author Editor

    100 % free samples scientifically referred to as the free gifts are a approach used by the firms to judge the desire of the merchandise as well as gauge the actual response on their brand-new product by the individuals just before they start a full-scale current market kick off of the products. These are generally the actual samples that could be found by the people oftentimes free of charge as well as at marked down costs and therefore provided via the internet for all.

    ·

  25. Mike Author Editor

    In it’s current form this wouldn’t work when the boxgrid is flexible for a responsive site…any ideas if this effect is still possible?

    ·

  26. Jo Author Editor

    Hi i was wondering: is there a way to have the initial position of the slide the same as “after the hover”?

    thanks!

    ·

    • Nick Author Editor

      Hi Jo did you did you ever manage to set the same position as after hover ?

      Thanks

      ·

  27. Kathleen Ely Author Editor

    Is it possible to put multiple links in the caption area or are all A HREF just defined on the underlying image?

    TIA

    ·

  28. Erwin Author Editor

    Demo ???????
    Unbelievable there isn’t one.
    No ONE will use this then.

    ·

    • Sam Dunn Author Editor

      Hey there – it seems like you missed the “See Demo” button in the upper left sidebar.

      ·

      • morteza Author Editor

        thank’s, but there isn’t good place for demo link.
        and it isn’t searchable by browser find.

        ·

      • Sam Dunn Author Editor

        Top left sidebar

        ·

    • RandomWebDude Author Editor

      *facepalm*

      ·

  29. Sonu Author Editor

    Hello Sam,

    I’m trying the Full Caption Sliding (Hidden to Visible) effect

    This is not working in IE 7. It works in all other browsers, including IE 8.

    ·

  30. darealya Author Editor

    Hey there, thanks Sam for sharing, awesome sample.
    Could you please help me:
    I would like to change the sliding to a text content sliding
    Like http://www.apple.com/fr/why-mac/, is it possible?

    Thanks a lot!

    ·

  31. LM Author Editor

    Sigh, the only complaint I have is that when I get an error stating I didn’t fill out the right fields, that it not jump to a new page and completely eliminate what I’d written.

    Anyway, this is just what I’ve been looking for. My design is laid out in a way that the gallery has little dedicated space – it’s a minor attribute, unlike most galleries. However, it also needs textual descriptions. Thus, this is the perfect solution.

    Excellent share, Sam. Thank you.

    ·

  32. Juan Author Editor

    Hi, Please I need help to install.

    I try to install with WordPress’s plugin installer and the installation works, but when I try to activate the Mosaic plugin I obtains this message “Bad header”.

    WordPress version: 3.2.1
    OS: Debian 6.
    Web Server: Apache 2.2.16

    PD: I can’t upgrade my WordPress to the last version, because my web hosting only provides WordPress 3.2.1

    please sorry my bad english.
    Thanks.
    Juan

    ·

  33. gf Author Editor

    hg

    ·

  34. Stock Market Author Editor

    Awesome query.must use it. It’s changing the look of our site.

    http://www.sirfpaisa.com/stock-market-guide.php

    ·

  35. Tony Author Editor

    Hay, This is a very good and easy to use tutorial. Im trying to use the div class box.caption.full as in the tutorial. I have got the caption to slide up when the image is hovered over. The only problem I am having is that there is no background to it, so the writing is very hard to read. Any ideas? Any feedback would be greatly appreciated.
    Tony

    ·

  36. Andy Jones Author Editor

    HI,

    I love this – but for some reason, I cannot adjust the initial view.
    When the page loads, the slider is across the whole of the image. When I rollover it, and then rollout, it goes to the correct position.

    I can’t work out what I need to do!

    Thanks! :)

    ·

    • JJ Author Editor

      Andy – it looks like you need to modify the absolute position of the boxcaption element in the CSS. I added ‘top:170px;’ right below the position:absolute, in the .boxcaption class and it then starts my ‘black box’ 170px down.

      My CSS is now:

      .boxcaption{
      float: left;
      position: absolute;
      top:170px;
      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)”;
      }

      ·

    • john Author Editor

      Hi Andy,
      If what you want is for the caption to be hidden on page load, this worked for me: change the boxcaption position in CSS to “top:-170px;”

      .boxcaption
      {
      float: left;
      position: absolute;
      top:-170px;
      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)”;
      }

      ·

      • James Author Editor

        THANKS FOR THIS! It only took me three days to figure this out, with your help, of course.

        ·

  37. mike Author Editor

    if i stripped the margin out of the CSS, would it still work/ I am trying to achieve the effect that http://www.cigna.com uses

    ·

  38. Anton Author Editor

    Hi. It doesn’t work normal when is in the begining of page. Anybody please Help!

    ·

  39. chairul Author Editor

    thnx so much, easy to use :)

    ·

  40. Ph03nix Author Editor

    Ok, I like the boxes and all, I want to use them for the lower half of my site to feature user profiles but for the life of me and 2 days worth of work I can’t get this to center in my div……. Any Ideas?

    ·

  41. thiet ke web da nang Author Editor

    Hello all ! I’m Mr Dung in Viet Nam, thank so much, easy to use

    ·

  42. lilja Author Editor

    Great !! thank you :)

    ·

  43. Ahmet Şen Author Editor

    thanks for sliders. very nice archive.

    ·

  44. Kim Author Editor

    Hi everyone!

    What a great plugin! Is there any way to have the images scroll or have a slideshow effect with multiple images in one div?

    I love this plugin, thank you Sam!

    ·

  45. hinh anh dep Author Editor

    Thank you for sharing. I am very good. I will do it for my website

    ·

  46. Bernard Author Editor

    Thanks. I’m going to use it for my blog. very useful =)

    ·

  47. manish Author Editor

    my image sliding works well but when i use another functions like tabs (jquery menu tabs) , only of them works.. either tabs or sliding
    any solutions??

    ·

  48. davide Author Editor

    is possible to add the easing?

    ·

  49. Raj Author Editor

    Hi
    can we achieve this affect like this on click function, i tried but couldn’t find the logic that if one image clicked and other go down like this:

    https://www.facebook.com/pages/create.php

    ·

  50. Rene Author Editor

    Hi there,

    I love this stuff but i don’t seem to get the sliders to start in the position they are after you’ve mousedovered (new word i just invented) them.

    check out http://bit.ly/fDWvuK for an example. To in other words i’d like to change the position of the caption on initial load.

    Going slightly nuts on this please advice

    ·

  51. Richard Author Editor

    Hi I have tried to apply these awesome effects to a Drupal website and have managed to get it to work by putting the code found in the index.php file in a page.tpl . Unfortunately in IE it kill anything using JS and throws all the styling of the website to the left. However it works just fine in Fire Fox no surprise here. I was thinking that if I put the index.php in a templates folder with all the other php files that Drupal uses, and put the css in my css style sheet I could call the css and index.php from the template.php file. I know I will need to create a php function to call these two file but not really sure if this is the correct direction. Any suggestions would be appreciated.

    ·

  52. Richard Author Editor

    Hi I have tried to apply these awesome effects to a Drupal website and have managed to get it to work by putting the code found in the index.php file in a page.tpl .

    Unfortunately in IE it kill anything using JS and throws all the styling of the website to the left. However it works just fine in Fire Fox no surprise here.

    I was thinking that if I put the index.php in a templates folder with all the other php files that Drupal uses, and put the css in my css style sheet I could call the css and index.php from the template.php file. I know I will need to create a php function to call these two file but not really sure if this is the correct direction.

    Any suggestions would be appreciated.

    ·

  53. Lorraine Author Editor

    Awesome. Thank you for the information.

    ·

  54. wkinddwrows Author Editor

    davila pharmacy san antonio [url=http://instablogg.com/5DtwCyy#576] zithromax prednisone z pack [/url] pain medicine for abscessed tooth
    group health riverpoint pharmacy [url=http://instablogg.com/zs71pp4#396] z pac antibiotic sinus infection [/url] holistic medicine minnesota
    rite aid pharmacy massachusetts avenue cambridge [url=http://instablogg.com/myFdL7Z#197] link [/url] mexican border pharmacies adderral
    cvs pharmacy in milford oh [url=http://instablogg.com/OT-Ze85#938] link [/url] paul starr social transformation of medicine
    quotes prevention medicine [url=http://instablogg.com/zA7gEF-#894] zpack and alcohol antibiotics ask [/url] elsevier com preventive medicine
    cannon family medicine [url=http://instablogg.com/PShu8nG#725] zpack antibiotic [/url] hitchcock pharmacy new york
    literature and medicine anthology [url=http://instablogg.com/1HlBDwm#207] zitromax and alcohol consumption [/url] medicines causing of hair loss
    angiosperms and medicine [url=http://instablogg.com/vCmPZZG#041] zithromax z-pak generic drugs [/url] pharm optima chris schauer
    medicine pills identification pictures [url=http://instablogg.com/c2t9Cdw#767] zithromax zpak com azithromycin [/url] welbeck pharmacy london
    candre medicine cabs robern [url=http://instablogg.com/m0pRNTD#511] link [/url] medicine cabinet ba o
    cvs pharmacies drug pricing <a href=http://instablogg.com/5DtwCyy#534] zithromax z pack and beer prescriptions pharmacy online
    nuclear medicine practitioner future salary <a href=http://instablogg.com/zs71pp4#357] z pac msrp medicine ball workou
    what is qid in medicine <a href=http://instablogg.com/myFdL7Z#343] zpack side effects medication vet medicines
    altimeters medicine that helps down syndrome <a href=http://instablogg.com/OT-Ze85#984] zpack generic nuclear medicine management
    prohealth 2 pharmacy new york <a href=http://instablogg.com/zA7gEF-#997] zpack for strep throat antibiotics medicine to numb throat
    is ayruvedic medicine legitimate <a href=http://instablogg.com/PShu8nG#133] zpack for sinus infection antibiotic pharm control rss feed
    cvs pharmacy oakland md <a href=http://instablogg.com/1HlBDwm#874] 1 gram zitromax chlamydia babies killed by patent medicines
    nelsons homeopathic medicine <a href=http://instablogg.com/vCmPZZG#231] z-pak buy zithromax drugs muscle relaxer most powerful medicine
    bristol myers free medicine assistance <a href=http://instablogg.com/c2t9Cdw#403] zithromax zpak com macrolide pharmacy tools instruments
    internal medicine topic collections archives <a href=http://instablogg.com/m0pRNTD#452] link pharmacy warehouse melbourne

    ·

  55. Android Marketplace Author Editor

    Sliding Boxes and Captions with jQuery | Build Internet I was recommended this website by my cousin. I’m not sure whether this post is written by him as nobody else know such detailed about my difficulty. You are amazing! Thanks! your article about Sliding Boxes and Captions with jQuery | Build Internet Best Regards Shane Schaad

    ·

  56. web design nepal Author Editor

    nice work thanks for thiss codes really useful…..

    ·

  57. tkindinrows Author Editor

    civil war medicine supplies [url=http://www.formspring.me/acompliaorder/q/304953822768280061#007] cheap discount order acomplia online [/url] cat dog medicine
    ma pharmacy technician training [url=http://www.formspring.me/acompliaorder/q/304953791696868702#863] [/url] pharmacy tech vs surgical tech
    ms sports medicine and orthapedic center [url=http://www.formspring.me/acompliaorder/q/304953764123510028#501] acomplia online needed [/url] bananas as medicines
    medicine chest the villages florida [url=http://www.formspring.me/acompliaorder/q/304953721907851548#437] acomplia or rimonabant 20mg [/url] traditional medicine is not credible
    abstract poster pharmacy [url=http://www.formspring.me/acompliaorder/q/304953687820735633#509] order acomplia uk [/url] ecological problem in herbal medicine pdf
    medicine hat galaxy theater [url=http://www.formspring.me/acompliaorder/q/304953663862874258#927] link [/url] herbs in medicine
    disrupting ns to study medicine [url=http://www.formspring.me/acompliaorder/q/304953641704366184#926] buy acomplia overnight delivery [/url] medicine infant dosage chart
    people’s pharmacy little rock [url=http://www.formspring.me/acompliaorder/q/304953611924804596#608] buy acomplia diet pills [/url] pragmatar cream pharmacy
    old crow medicine cover song list [url=http://www.formspring.me/acompliaorder/q/304953583369994206#227] acomplia preis 97 [/url] ambulatory care pharmacy md
    rite aid pharmacy in ky [url=http://www.formspring.me/acompliaorder/q/304953560511026060#818] [/url] rite aid pharmacies in tacoma washington
    oriental medicine tucson <a href=http://www.formspring.me/acompliaorder/q/304953822768280061#487] buy online order acomplia henry ford hospital pharmacies
    pharmacy reimbursement international <a href=http://www.formspring.me/acompliaorder/q/304953791696868702#962] online store buy acomplia aaa pharmacy guanica puerto rico
    canon family medicine <a href=http://www.formspring.me/acompliaorder/q/304953764123510028#679] acomplia online cheap medicines prescribed for breast cancer
    alternative medicine herbal therapy for inflamation <a href=http://www.formspring.me/acompliaorder/q/304953721907851548#618] acomplia or rimonabant acne medicines australia
    baylor college of medicine infertility <a href=http://www.formspring.me/acompliaorder/q/304953687820735633#826] medicine ball 30 lbs
    free samples of medicine <a href=http://www.formspring.me/acompliaorder/q/304953663862874258#021] acomplia overnight delivery journal of experimental medicine
    compunding pharmacies in montreal canada <a href=http://www.formspring.me/acompliaorder/q/304953641704366184#206] acomplia overnight mail dead poetic new medicine lyrics
    cvs pharmacy asheville nc <a href=http://www.formspring.me/acompliaorder/q/304953611924804596#639] tennessee board of veterinary medicine
    forensic medicine case studies <a href=http://www.formspring.me/acompliaorder/q/304953583369994206#902] acomplia preis 99 24 hour pharmacy dallas georgia
    loras college sports medicine <a href=http://www.formspring.me/acompliaorder/q/304953560511026060#541] acomplia best price generic herbal medicine for dogs book

    ·

    • Matt Author Editor

      This was a very cheap shot at plugging in a bunch of links that didn’t even relate to the topic at all.

      I think this looks very cool. I can’t wait to try this little project on my website.
      Thank you for this well explained tutorial. :-)

      ·

  58. Inspirational Quotes Author Editor

    Sliding Boxes and Captions with jQuery | Build Internet I was suggested this website by my cousin. I am not sure whether this post is written by him as no one else know such detailed about my trouble. You are amazing! Thanks! your article about Sliding Boxes and Captions with jQuery | Build Internet Best Regards Schaad Lawrence

    ·

  59. easy backup wizard review Author Editor

    Utilizing writers’ exercises such as “chunking”. They use many websites that contain several creative writing exercises. Writers read an exercise, and do it.

    ·

  60. saurabh Author Editor

    The above code are really very usefull, thanks a lot !!

    ·

  61. pkindvjrows Author Editor

    nicaraguan medicine advances [url=http://www.youtube.com/watch?v=NdOiE9ojtnQ#811] buy ventolin inhaler [/url] jackson medical pharmacy san jose
    idaho pharmacy school [url=http://www.youtube.com/watch?v=ycjKNZgkjgE#403] no prescription buy albuterol inhaler online [/url] medicine advertisement
    st john’s university college of pharmacy [url=http://www.youtube.com/watch?v=h1IglwoqyTE#050] link [/url] hippa pharmacy law
    compounding pharmacys st catharines [url=http://www.youtube.com/watch?v=kYa2KcaUZRk#344] buy albuterol inhaler online [/url] beth d’amico student medicine
    discount pet pharmacy [url=http://www.youtube.com/watch?v=H8AuYTcD3ck#726] sulfate inhaler cost buy albuterol [/url] twin cities functional medicine doctors
    future trends in pharmacy retail [url=http://www.youtube.com/watch?v=hdO0IiWnUoU#685] albuterol inhalers price best buy [/url] best poultry worming medicine
    medicine hat wedding consultant [url=http://www.youtube.com/watch?v=8Lx7R9oQNWQ#022] [/url] pharmacy degree online pharmacy technician programs
    facts on egyptian medicine [url=http://www.youtube.com/watch?v=lHxxaBIrInc#444] buy albuterol dosage online no prescription [/url] navy preventitive medicine seminar
    when do medicines become otc [url=http://www.youtube.com/watch?v=ypgKM4kD1-o#063] [/url] tempe frys pharmacy
    greater gwinnett internal medicine associates [url=http://www.youtube.com/watch?v=emSjTV2aT64#698] buy albuterol online cheap drug [/url] what two medicines are in lotrel
    pharmacy customer service <a href=http://www.youtube.com/watch?v=NdOiE9ojtnQ#783] buy ventolin inhaler uk pharmacy abbrevations
    online pharmacy marketing <a href=http://www.youtube.com/watch?v=ycjKNZgkjgE#882] link journal of medicine autism
    chung ching herbal medicine <a href=http://www.youtube.com/watch?v=h1IglwoqyTE#037] nacds pharmacy technician
    virginia pharmacy degree online <a href=http://www.youtube.com/watch?v=kYa2KcaUZRk#563] buy albuterol inhaler online no prescription atrovent hfa inhaler why choose holistic medicine
    pharmacy technician jobs in wyoming <a href=http://www.youtube.com/watch?v=H8AuYTcD3ck#582] sulfate inhaler cost buy albuterol alternative medicine promote campaign
    sc pharm <a href=http://www.youtube.com/watch?v=hdO0IiWnUoU#901] buy albuterol inhalers uk pharmacy on call
    pharmacy structure <a href=http://www.youtube.com/watch?v=8Lx7R9oQNWQ#370] link pharmacies and henderson nv
    on site pharmacy <a href=http://www.youtube.com/watch?v=lHxxaBIrInc#989] albuterol no prescription buy ventolin online cvs pharmacy in pr
    ho ch medicine urodynamic <a href=http://www.youtube.com/watch?v=ypgKM4kD1-o#960] buy albuterol online without prescription sam’s club pharmacy katy
    cranial osteopathy medicine definitions <a href=http://www.youtube.com/watch?v=emSjTV2aT64#985] where can i buy albuterol online discount algonquian medicines

    ·

  62. fashion designers Author Editor

    You can definitely see your skills in the paintings you write. The arena hopes for even more passionate writers such as you who aren’t afraid to say how they believe. Always go after your heart.

    ·

  63. görüntülü sohbet Author Editor

    Zune and iPod: Most people compare the Zune to the Touch, but after seeing how slim and surprisingly small and light it is, I consider it to be a rather unique hybrid that combines qualities of both the Touch and the Nano. It’s very colorful and lovely OLED screen is slightly smaller than the touch screen, but the player itself feels quite a bit smaller and lighter. It weighs about 2/3 as much, and is noticeably smaller in width and height, while being just a hair thicker.

    ·

  64. Sabre Author Editor

    Hi Sam, thnx for the captions!

    I do have an issue, when using a DOCTYPE, the captions are not positioned at the right spot until hovered, try adding a doctype in the demo, you will see the issue/bug. Is there a fix for this? THANKS!

    ·

    • Sabre Author Editor

      Whoops I already figured it out :) it was a CSS issue.

      Adding ‘px’ after the top and left values in the boxcaptions, this is not needed when using 0.

      ·

  65. Paid Directory List Author Editor

    Fast Approval 3000 + Paid Directory List, Get Thousands of High Quality

    ·

  66. Joomla Developer Nepal Author Editor

    I came across this site and found this great tutorial, just what I was looking for. Firstly, thanks for the knowledge and run through, it helped a lot

    ·

  67. impapeted Author Editor

    [url=http://game-online-reviews.com/angry-birds-space-2/]Angry Birds Space[/url]

    ·

  68. Janelle Tiulentino Author Editor

    This is a great tutorial. Thank you!!!

    ·

  69. Parels Author Editor

    Cool stuff, i think i am going to use this on more then one site.

    ·

  70. Crystal Author Editor

    Hi I am wondering if you can help me out.
    I need something that is simliar to the way this works, but it is different. I will have a page gallery but instead of having the rollover slide over the image I would like it to slide out to the right, left, top, or bottom of the image. Can I change this code to work like this or do I need something totally different? I have been looking all over for javascript to slide out from one direction of the image but I can’t seem to find anything. You can see by this link (http://www.pfxn.com/redesign/index_HP.html) that I am pretty stuck, didn’t really make it far within the code.

    ·

    • crystal Author Editor

      I am getting emails say there is a reply posted on my comment, but I am not seeing anything.

      ·

  71. Maurizio Petrachi Author Editor

    Molto ma molto interessante!

    ·

  72. Jonathan Author Editor

    Nice one, this is very useful. Thank you!

    ·

  73. jipeus Author Editor

    very cool tutorial! i’m sure gonna put this on my projects to come, and when i post an article bout this, i’m putting this url as my source :)

    ·

  74. Công ty quảng cáo Author Editor

    content blog is very good !
    thank you very much

    ·

  75. Ahmet ŞEN Author Editor

    thanks. very nice sliders.

    ·

  76. Kim Author Editor

    Thank you for this great tutorial! :)
    Does it also work whit image shaddows?
    Here is my link (1st Picture):
    http://www.schaugarten-koehler.at/kimkoehler/index2.html
    It look great, but it isn’t hidden.
    Thanks!

    ·

  77. mark Author Editor

    this works great..upon first load, however i am using quicksand jquery filter and when i click on a link to apply a filter to my ul this boxcaption jquery no longer works. any ideas why?

    ·

    • Leighton Author Editor

      I’ve just discovered the same problem and can’t figure out how to fix. Did you have any luck?

      ·

    • Leighton Author Editor

      I have quicksand working and filtering my portfolio. I also have this script that displays the caption and works fine first time around. When I got to filter the captions no longer appear. I’m guessing it must be something to do with the click event overwriting the hover. Anyone out there have the same problem? Cheers.

      ·

  78. admaser Author Editor

    Hi Sam – not sure if you are still monitoring this or if anyone out there can help me.

    I am trying to implement your script from here on the same page as one of your other scripts – http://buildinternet.com/project/supersized/ Supersized (I am using the plug in created by Ben De Boeck

    I have both scripts working well on my wordpress site but I cannot get them both to work on one page (what will be the home page) so I am assuming there is a javascript conflict somewhere (not proficient in javascript)

    Can you or anyone else out there help me to get these working on the same page?

    Many thanks for any suggestions in advance!

    ·

    • Rodrigo Author Editor

      si pudiste resolver tu conflicto? como?

      ·

  79. Been Author Editor

    Thanks for share! I’ll try it! :)

    ·

  80. paidikaiergotherapeia Author Editor

    Is it possible to tweak your example in order to make a slider whose slides come from the real posts you make in a blog (either randomly or latest)?

    ·

  81. Mr. Mike Author Editor

    when i use fot html5, it can’t play, can you help me?

    ·

  82. Author Editor

    谢谢你的指导,我用你的jquery插件完成了我的作业,没有用于商业项目,再次感谢!

    ·

  83. SpecialStance Author Editor

    great piece, you missed a few spellin mistakes near the end tho lol

    ·

  84. ritika Author Editor

    hi.. i am unable to use it.. the sliding isnt working. i am new to this. i am new to this but want to implement it for some important work. please help how should i go about?

    ·

  85. Heren sieraden Author Editor

    I still use this after all this time. Will implement it on our newest section of our website: Heren sieraden met parels.

    Thanks again

    ·

  86. Vardan Author Editor

    Very good code, works amazing!

    Thanks for sharing this!

    ·

  87. Petur Author Editor

    Hey

    Thank you for this useful feature.

    I have a minor problem that I hope you can help with.
    I want to be able to activate the slide by clicking a link instead of hovering.
    How would one do that?
    regards

    ·

  88. Shahbaz Ahmed Bhatti Author Editor

    Very Gooooooooooooooooooooooooooooooooooooooood and nice, it make me god job.
    Bunch of thank buddy

    ·

  89. Dimi Author Editor

    Thanks for sharing this complete article.

    ·

  90. Dima Author Editor

    It is possible that it works with a lightbox?

    ·

  91. Rafael Author Editor

    Thanks, I have been looking for a reason to use this effect somewhere on my site but even those implementing it was easy to build. I was able to mod a plugin to have this effect.

    It takes a list of pages with thumbnails and descriptions and applies your code to it. Later I’ll work of make each individual effect load randomly to each object.

    Thanks again for sharing.

    ·

  92. microsilic Author Editor

    That is great work thanks
    I would like to make somethings like thishttp://fabirco.org how can h make it

    ·

  93. Jimmy Author Editor

    Thank you for sharing this! This was a very helpful tutorial – I really appreciate the downloads… it made it much easier.

    ·

  94. David Author Editor

    Absoloutely brilliant – ive been looking for this for ages – love it :-)

    ·

  95. Ben Author Editor

    This worked like a charm. Thanks, Sam!

    ·

  96. Day Milovich Author Editor

    this is awesome, simple, and brilliant. thanks! i am indonesian. :))

    ·

  97. Rex Author Editor

    Awesome code! I inserted this text slider into an image rotator i have and have one problem.

    when i resize the browser window, the image does not adjust appropriately as the rest of the elements on my page. i’ve tried using different properties for the boxgrid (eg. absolute, relative, fixed) and still no results.

    any idea how i can achieve this?

    ·

  98. Benny Author Editor

    it is possible to change the spacing or move it? for example i have only 1 picture there and i want to center the image. the border and everything else will be center?

    ·

  99. Shew Author Editor

    Thank you so much! :)

    ·

  100. Jake Author Editor

    Where does this code go in the html/css document?:
    $(document).ready(function(){
    //To switch directions up/down and left/right just place a “-” in front of the top/left attribute
    //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,duration:300});
    }, function() {
    $(“.cover”, this).stop().animate({top:’0px’, left:’0px’},{queue:false,duration:300});
    });
    //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});
    });
    });

    ·

    • Z Author Editor

      In the head.

      ·

  101. omrfrk Author Editor

    thank you * 10000 :))

    ·

  102. Rodrigo Author Editor

    HELP! tengo el slidebox en mi web, actualice wordpress a la ultima version y no funciona! es por la actualizacion? no he movido nada al codigo….

    ·

  103. shobhit Author Editor

    Wow nice information you have here.

    ·

  104. shobhit Author Editor

    Thanks for sharing this interesting blog

    ·

  105. shobhit Author Editor

    Actually google made searching of information easy on any topic.

    ·

  106. shobhit Author Editor

    . Well keep it up and post more interesting blogs

    ·

  107. shobhit Author Editor

    Good post man,

    ·

  108. shobhit Author Editor

    just looking around some blogs

    ·

  109. shobhit Author Editor

    seems a pretty nice platform you are using.

    ·

  110. shobhit Author Editor

    You did a very great job, keep it up.

    ·

  111. shobhit Author Editor

    I really impressed by your post.

    ·

  112. shobhit Author Editor

    The subject of this article is also very capturing.

    ·

  113. shobhit Author Editor

    Actually google made searching of information easy on any topic. Well keep it up and post more interesting blogs.

    ·

  114. shobhit Author Editor

    I have found this article very interesting

    ·

  115. sfa Author Editor

    its quite difficult slider, can you tell me the easiest way to learn this type of slider?

    ·

  116. Biddy Author Editor

    Can someone please look at my site and tell me why the sliding isn’t working?

    ·

  117. tomoac Author Editor

    Can I distribute by free in my add-ons of cms included this code?

    ·

  118. hoang Author Editor

    i want to learn jquery.:D

    ·

  119. Ervin Author Editor

    Hi Sam!

    I’ve just finished the first version of a WordPress plugin which is made partly based on your tutorial…

    You can check it out here:
    http://wordpress.org/extend/plugins/wp-slide-up-box/

    Big thanks for the basics!

    Ervin

    ·

  120. Paul Author Editor

    Gracias por tú trabajo!

    ·

  121. Milap Author Editor

    Actually I want to give Fade effect on over of Image.
    How can I apply?

    ·

    • msn show Author Editor

      Well done I really like your site so I wanted to write a comment will be happy thank you Happy New Year

      ·

  122. huynhhieu Author Editor

    thanks, nice slider

    ·

  123. Sasha Author Editor

    Hello and thanks for sliding-boxes! Last year I had created Joomla module for sliding boxes with possibilities to have many boxes on the same page, but with different styles, effects and parameters (used module ID…), and all is fine.

    One thing is important: if you have “slow” or “freezing” slides (rendering issues) in Mozilla than is important to set background color of main container/wrapper! Object mapping…

    Best regards!

    ·

    • görüntülüs ohbet Author Editor

      Well done I really like your site so I wanted to write a comment will be happy thank you Happy New Year

      ·

  124. Dan piano Author Editor

    Thanks for shares, I can use for future projects

    ·

  125. Cara Author Editor

    Sorry to bother you but I am trying to use this for a table of contents in an interactive magazine. However when I try to use it on Xcode it won’t work. Any help of suggestions would be really appreciated because I’m a newby to jQuery.
    Thanks :)

    ·

  126. Fred Author Editor

    Nice! A couple things:
    - The html in the example on this page isn’t right. It looks like you copy and pasted the anchor tag within the anchor tag or something:
    Artist<a href="http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/” target=”_BLANK”>More Work

    - I’d include the h3 and anchor CSS styles in this example, it really helps to see the final product. I just got them from the demo with Firebug. I’d also throw in a cursor style when you hover, but that’s just me.

    Thanks!

    ·

  127. gavin Author Editor

    hi I want to make the background of the ‘cover’ clickable. Is it possible?

    ·

  128. sara Author Editor

    Thanks
    very good.

    ·

  129. yousef Author Editor

    you are simple and great

    ·

  130. Qaiser Author Editor

    Is there a demo to see how it actually behaves? instead of applying all the stuff and finding it was not required.

    ·

  131. oyuncu başvurusu Author Editor

    thank you for shared.. amazing…

    ·

  132. Zagi Author Editor

    Thanks for share :) Great plugin!

    ·

  133. PRussell Author Editor

    The vertical slide effect works wonderfully in Firefox, Chrome and Safari but not with IE browsers.

    The covers do not slide up when the users cursor is placed over the image.

    Any IE hack to overcome this bug?

    The page in which the vertical sliders are in use is http://www.PaulRussell.net.

    Thanks.

    ·

  134. pelangsing Author Editor

    where is demo ???

    ·

  135. Ich Author Editor

    Virus: JS:Redirector-AAA [Trj] (Engine B)

    Virus beim Laden von Web-Inhalten gefunden.

    Adresse: buildinternet.com
    Status: Der Zugriff wurde verweigert.

    ·

  136. Balon Süsleme Fiyatları Author Editor

    very very good thankyou admin

    ·

  137. Balon Süsleme Author Editor

    I liked your site is wonderful comments I would recommend my friends looked very nice thank my colleagues

    ·

  138. Thoi Trang Author Editor

    Thank you for sharing this. I will try use it.

    ·

  139. acılıs organizasyonlari Author Editor

    showtimeajans

    ·

  140. acılıs organizasyonlari Author Editor

    good nice very

    ·

  141. http://tinyurl.com/xtraperch04281 Author Editor

    What precisely honestly inspired you to create
    “Sliding Boxes and Captions with jQuery

    ·

  142. Precious Fab-cast Pvt. Ltd Author Editor

    Thanks for this article, I can use for future projects

    ·

  143. Seba Author Editor

    when I put the circle mosaic inside an li it is not working,
    How to fix it?

    regards

    ·

  144. Filipe Author Editor

    How can I make it responsive??? thanks

    ·

  145. James Author Editor

    Appreciate the help and the comments, was able to get this working on my highly-modified wordpress site. thanks everybody!

    ·

  146. Husslemine Author Editor

    Great tut…I am having a hard time finding where to pace the jquery code. I tried the function file, the header….can someone help please.

    ·

  147. eniotna Author Editor

    It does’nt works when i add the doctype in the html document !

    ·

  148. momo Author Editor

    nice job man

    ·

  149. Casco Romano Author Editor

    Thank you Sam, nice and simple effects to make my web more agreeable

    ·

  150. Ampoule Filling Machines Author Editor

    Awesome! Thanks for Sharing…

    ·

  151. Eugene Author Editor

    Very useful and easy to use.
    Thanks a lot.

    ·

  152. Kirk Author Editor

    I have been stuck on this for 2 days now. I tried to have the overlay show partial then slide up. But the overlay fills the whole window. I tried what others said and use the top:181 or top:-181 but the overlay still covers the whole window then when you role on it it goes to where it should.

    I also tried to hide the whole overlay and let slide up but when that block of code the overlay is covering the window . I don’t understand what i am doing wrong. Very frustrated that it looks so simple to implement but is taking me 2 days and counting.

    http://tmwa.businesscatalyst.com/Home_template2.htm

    ·

    • Kirk Author Editor

      I can’t believe I wasted all this time because the top property was missing the px. Here is the code from the instructions below…as you can see the top property does not have the px and that was causing it not to work properly…SMFH

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

      ·

      • Guava Lab Author Editor

        Thanks so much for that!!! I spent so long trying to figure out why this wasn’t working and such a simple fix.

        ·

  153. ramesh kahanal Author Editor

    Nice tutorial and very useful for my homepage

    ·

  154. kamerali sohbet Author Editor

    very good thankyou admin

    ·

  155. msn show Author Editor

    good nice very nice

    ·

  156. vattu24h Author Editor

    it’s great, thanks !

    ·

  157. acılış balon süslemesi Author Editor

    very good nice very nice

    ·

  158. KittyBingo Author Editor

    Іt’s going to be finish of mine day, except before ending I am reading this wonderful paragraph to improve my know-how.

    ·

  159. Izrada sajtova Author Editor

    Great and clean code. Thank you

    ·

  160. Brad Author Editor

    Where do i insert the “$(document).ready(function….” code in a wordpress website?

    Thanks!

    ·

  161. nhung huou Author Editor

    Thanks you very much !

    ·

  162. Usman Author Editor

    Good Article.
    I was also searching for demo :)
    I used search to find demo. Then got answer from comments. Normally demo button is shown in starting or end of article.

    Thanks

    ·

  163. ve may bay online Author Editor

    thanks, it cool

    ·

  164. Bill Author Editor

    I can’t seem to get this to work. I’m trying to use it in sharepoint 2010. I put the CSS in my already existing CSS file (which is referenced in my master page). I’ve added the jquery code to my .js file I have referenced and then I added the HTML to a content web part, but it just shows my picture and thats it, no affects or anything. Any ideas?

    ·

  165. micman Author Editor

    Nice post.
    Would be great if you post a demo.

    ·

  166. free ipad Author Editor

    free ipad

    I’ve been surfing online greater than three hours lately, but I by no means found any interesting article like yours. It is pretty worth enough for me. In my view, if all web owners and bloggers made good content material as you probably did, the web can be a lot more useful than ever before.

    ·

  167. jdj Author Editor

    not compatible with jquery 1.8?

    ·

  168. DesignOHO Author Editor

    Thanks you very much this is Good Script.

    ·

  169. fedez Author Editor

    hello, how could I do to “cover” does not appear from the beginning? I want that only appears when the user rollover the image. thanks

    ·

  170. Arifa Author Editor

    Hi Zach , it my first day of visiting ur site,,, realy vry impress

    ·

  171. John Author Editor

    Thanks. I really like the code and other info. I was looking for a while to find something like this article. Please keep sharing.

    ·

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

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

    ·

  173. 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?

    ·

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

    balon süsleme organizasyonu

    ·

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

    goood nice

    ·

  176. 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!

    ·

  177. 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.

    ·

  178. Ibrahim Author Editor

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

    ·

  179. WoW Farming bot Author Editor

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

    ·

  180. 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!

    ·

  181. Angelika Author Editor

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

    ·

  182. Neel Author Editor

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

    ·

  183. Athar Author Editor

    Cool stuff,got the idea

    ·

  184. mac Author Editor

    thank you this helps me a lot :)

    ·

 

Build Internet by One Mighty Roar. Since 2008.