Sliding Boxes and Captions with jQuery


slidingbig

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.

.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 aren’t using the semi-transparent captions you are done with CSS – move to Step 2.

.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)";
 	}

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.

 .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 pre-formatted potentials to help you along. Play around with them to find one that fits your needs and style.

$(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});
	});
});

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:

<div class="boxgrid captionfull">
	<img src="jareck.jpg"/>
	<div class="cover boxcaption">
		<h3>Jarek Kubicki</h3>
		<p>Artist<br/><a href="http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/" target="_BLANK">More Work</a></p>
	</div>
</div>

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!

  • Stumble It!
  • Bookmark It!
  • Tweet it!

About Sam Dunn

Sam is a designer and co-founder of One Mighty Roar from Massachusetts, USA. He takes particular interest in all things aesthetically pleasing. He can be found online at Vivalasam and Twitter.

 

Discussion

  1. Bogdan Pop

    April 1st, 2009 at 2:09 AM

    There’s a similar effect on http://www.sidd.ca/showcase.php . Nicely done, better coding.

    Bogdan Pop’s last blog post..Design for grandma too!

  2. Callum Chapman

    April 1st, 2009 at 2:42 AM

    nice stuff! love the effect on the demo page ;) cheers!

    Callum Chapman’s last blog post..Batch Image Resizing in Photoshop

  3. Amy Stoddard

    April 1st, 2009 at 4:54 AM

    I noticed that if I change the tag to:

    That the page loads with the hover state activated. How do I get rid of this? Any idea why its doing this?

  4. Amy Stoddard

    April 1st, 2009 at 4:56 AM

    Sorry…my post didn’t come through. If I add the DOCTYPE to the opening HTML tag, the page loads w/ the hover state activated. I’m using FF 3.0.8 on Mac OSX 10.4.11.

  5. Idemium

    April 1st, 2009 at 5:48 AM

    This helps us to forget about Flash for to add interactivity for little elements.
    Thank you.

    Idemium’s last blog post..Actualités

  6. Jørgen

    April 1st, 2009 at 7:21 AM

    Great tut! Looks similar to what I do over at http://www.TutorialMagazine.com :)

  7. ozzysong

    April 1st, 2009 at 9:24 AM

    Nice implementation of the slide effect.

    ozzysong’s last blog post..Slides creativos con jQuery

  8. SIDD

    April 1st, 2009 at 9:29 AM

    Bogdan Pop – thanks for the mention! Had to come check out the new referring site that popped up in our stats. Not bad.

  9. Vivianne

    April 1st, 2009 at 10:15 AM

    Perfect! I would love to see this hover effect integrated with a simple image gallery. I can’t find this anywhere…

    Thanks for sharing!

    Vivianne’s last blog post..vimello: Me falaram que fulano morreu e eu comecei a rir, primeiro de abril e tal… Mas morreu mesmo. :X

  10. julian

    April 1st, 2009 at 10:18 AM

    So… how would one turn this into a fading slideshow while still preserving the nifty hover/caption effect?

  11. Ben Holmen

    April 1st, 2009 at 10:37 AM

    Very nice effects, and well executed. Thanks!

  12. rohnn

    April 1st, 2009 at 10:51 AM

    @Amy Stoddard
    I had the same problem : Win XP, FF2, IE6, Chrome… etc.

    I think the problem comes from the css and the positionnig of the boxcaption and it’s interpretation:

    You just need to add the unit after the positioning:

    .captionfull .boxcaption { top: 260px;…
    .caption .boxcaption {top: 220px;…

    for 0, you dont need unit a 0 is absolute 0%=0px=0whatever… so will be understood.

    I guess with a doctype unit needs specified for non-zero values as otherwise is intrepreted wrongly (or not at all) since too many to choose from: 260% !=260px!=260em != 260whatever

    This solved the problem for me. (tested: html4.01 + xhtml11 strict)

  13. Chris Raymond

    April 1st, 2009 at 3:19 PM

    I get the whole thing, except how and where do you call this jquery to achieve the animation?

    Chris Raymond’s last blog post..Golden anniversary scrapbook

  14. Sam Dunn

    April 1st, 2009 at 6:38 PM

    @Jorgen
    You run a quality site, it played a part in the idea for this tutorial, thanks for that!
    @julian
    This is not quite meant to be a slideshow, however if you are interested theres a great tutorial here : http://jonraasch.com/blog/a-simple-jquery-slideshow
    @rohnn
    Nicely done, thanks for saving me some explanations
    @Chris Raymond
    You’ll want to put the jQuery in the header, if you look at the downloadable files you’ll hopefully get a good sense of where to put what.

  15. eddie

    April 1st, 2009 at 11:02 PM

    thanks for the great work!But I have a question:Can I get a inner border when mouseover the image.just looks like this site(but it use flash)http://www.ciriljazbec.com/

  16. Bajzito

    April 2nd, 2009 at 6:44 AM

    Very awsome tutorial, thx a lot for it. I will for sure use this in some of my projects :)

    Bajzito’s last blog post..Slávna Helvetica

  17. JDStraughan

    April 3rd, 2009 at 12:53 PM

    Great tutorial. Added to http://tutlist.com

    JDStraughan’s last blog post..Create a Ajax based Form Submission with jQuery

  18. Max

    April 4th, 2009 at 7:56 AM

    I love your script and it will be very useful for a website i’m cooking by now.

    I use it with “slidedown” to show a text hidden by the image. It works, but if I give an absolute positioning to my text (by styling h4 and h5…) , they appear in front of the image.

    Is there a way to solve this problem ?

    Best Regards,

    Max

  19. Mahbub

    April 4th, 2009 at 11:54 PM

    I had done something like this and put a post here http://www.jquerymagic.com/2009/03/how-to-make-a-beautiful-portfolio-gallery-using-jquery-animate/

    It’s using no plugin as well. Just a day before this one :)

    Mahbub’s last blog post..Guitar Chord Finder : Yet another old day script

  20. Max

    April 6th, 2009 at 5:44 AM

    Well, I found a (simple) way to do the trick : adding z-index to the image to get it to stay over the content even with positioning enabled.

    Once more, thanks for this wonderful script !

  21. Omar Ramírez

    April 7th, 2009 at 4:19 PM

    Nice work!, Love It!

  22. Cookie

    April 8th, 2009 at 11:26 AM

    Regarding Rohnn’s explanation on how to fix the page loading with the captions in an up state.
    I don’t understand how to fix the issue sorry?
    Can anyone elaborate? (layman’s terms lol).

    Cheers, Cookie.

  23. Jive

    April 9th, 2009 at 4:15 AM

    @Cookie – the answer of your question is simply just add “px” “em” or “%” on
    .captionfull .boxcaption {
    top: 260;<—-px,em or % here
    left: 0;
    }
    .caption .boxcaption {
    top: 220px;<—-px,em or % here
    left: 0;
    }

    works for me.(tested: html4.01 + xhtml11 strict)

    Thanks :)

  24. Stefan

    April 9th, 2009 at 9:13 AM

    Great job. Thanks for that!!

  25. cookie

    April 9th, 2009 at 5:27 PM

    Cheers Jive.
    I worked it out lastnight but didnt have chance to reply

  26. cookie

    April 9th, 2009 at 5:30 PM

    Don’t suppose anyone knows how this’ll work with with jQuery lightbox v0.5? I’m trying to get it working on the thumbnails with it……..

  27. cookie

    April 9th, 2009 at 7:00 PM

    Cool, i can confirm that it works with jQuery lightbox v0.5 on: WinXP FF3.0.8 & IE 7.0.5.

    Thanks a million Sam.

  28. Karen

    April 10th, 2009 at 1:29 AM

    So does this code not work with any doctypes? I am trying all of them and the sliders just won’t position correctly. The demo page does not have any doctype associated to it so can anyone out there get this to work on a web standard site?

  29. Tyler

    April 10th, 2009 at 1:25 PM

    Awesome tutorial! This is exactly what I’m looking for for my site, but I’d prefer to use MooTools to achieve it. Unfortunately, I don’t know how to properly port this… Anyone know where I can find a similar tutorial for achieving this effect with MooTools or perhaps could explain how to port this?

    Thanks!
    Tyler

  30. Michael

    April 10th, 2009 at 7:56 PM

    This is great but I’m worried about it slowing down my page loads. Is that going to be a problem?

  31. Alexandre Broggio

    April 12th, 2009 at 10:04 PM

    Very cool

  32. thorn

    April 13th, 2009 at 9:10 AM

    Looks great, Sam. But I don’t like that a hidden part is visible while a cover is loading. It’s impossible to create a secret area under the cover because of this nuance.

    thorn’s last blog post..COMINDWORK/BLOG: Project Management Certifications [godzhesas edited]

  33. BeyondRandom

    April 13th, 2009 at 4:42 PM

    Im using it now! Thanks for the easy tutorial on this!

    BeyondRandom’s last blog post..Poker Hand Values

  34. koew

    April 13th, 2009 at 5:39 PM

    Another live example can be viewed at Tutorial Magazine: http://www.tutorialmagazine.com/

    I bet the tutorial is added there as well ;)

    koew’s last blog post..I Want Vin Diesel in Every Movie I See

  35. Zach Dunn

    April 13th, 2009 at 6:24 PM

    @koew

    You’re absolutely right. Tutorial Magazine played a large role in motivating that particular variation of the effect. Jørgen should be congratulated on running such a fantastic site. If you’ll notice, he was actually one of the first to comment on this very tutorial.

  36. Frank West

    April 13th, 2009 at 9:53 PM

    Really nice examples, simple but effective and yet another effect that I will be using as time goes by.

    Thanks!

  37. Oliver Leitner

    April 14th, 2009 at 12:17 AM

    A question, where did you find that art, looks pretty good)

    Oliver Leitner’s last blog post..The new OpenSuSE Studio in Action

  38. SohoInteractive

    April 14th, 2009 at 11:21 AM

    very cool script.
    I wish it had manual controllers (e.g. close X) instead of auto close on mouseout

    K.

  39. cookie

    April 14th, 2009 at 2:52 PM

    Hi all, Is their anyway to make it so that the captions text is not transparent, only the caption box? I noticed that with my white images, the text’s transparency is quite visible!?

  40. Jørgen

    April 17th, 2009 at 11:44 AM

    @Zach Dunn Thanks for the kind words, coming from you that does actually mean a lot :) You guys run a good ship here at buildinternet too!

    I was thinking of making a tutorial about the slide effect, but you got ahead of me, so from now in I’ll make no improvements to my site in fear of you guys making great tutorials about them! ;)

    Keep up the good work,

    Jørgen
    http://www.TutorialMagazine.com

    Jørgen’s last blog post..The first two months – and why I love Twitter

  41. Graffhead

    April 19th, 2009 at 1:42 AM

    DOCTYPE – I had the same issue once I added the DOCTYPE. Adding px to the css fixed the issue.

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

    Graffhead’s last blog post..123 Klan + MSK in Hollywood

  42. Cookie

    April 20th, 2009 at 6:08 PM

    Any advance on my last query?
    //
    Hi all, Is their anyway to make it so that the captions text is not transparent, only the caption box? I noticed that with my white images, the text’s transparency is quite visible!?
    //

  43. Sam Dunn

    April 20th, 2009 at 8:40 PM

    @Cookie
    I noticed that was the case when I was first putting this together. I tried playing around with resetting the opacity levels individually on the text, but it didn’t seem to work. I too would be curious if anyone has a work around.

  44. Jørgen

    April 21st, 2009 at 9:19 AM

    @Cookie, @Sam Dunn: I have the same problem, but what you can do is to keep the text at 100% opacity, and then use a transparent .png image with a 90ish % black fill as a background in the sliding box. Of course you’ll have to use some sort of png opacity fix for IE users, but it works.

    Jørgen’s last blog post..33 Best Photoshop Tutorials of April 2009

  45. Anime Art

    April 21st, 2009 at 2:53 PM

    Superb !! the best part is it also works in my cms :D thank u :)

  46. xdotx

    April 21st, 2009 at 9:37 PM

    How could I make this work with external classes?

  47. Pradeep CD

    April 22nd, 2009 at 3:31 AM

    Awesome sliding boxes…

    I will use it for sure…

    thanks..

  48. nifer

    April 22nd, 2009 at 5:29 PM

    I had a problem
    when the site star the grid is in the bootom of the image, if I hover the grid show like should be…
    sorry for my english, Im from Argentina.

    nifer’s last blog post..cocinero pervertido

  49. MattQ90

    April 26th, 2009 at 8:37 PM

    Hi, the first thing I want to say is that I absolutely love this jquery effect and it gave me ideas on how to enhance my portfolio.

    The only problem I am facing is with flash objects. I embedded 3 flash elements in my website (twitter, lastFM and DailyMugshot). LastFM is covered with a slide the way it is supposed to be. Twitter and DailyMugshot unfortunately aren’t (at least not in FF3 windows and IE). The slides are positioned underneath the flashobject or in IE next to the object (which makes it invisible due to the hidden overflow)

    Anyone have a solution?

    Thanks in advance

  50. Cookie

    April 28th, 2009 at 11:16 AM

    This is off topic but i’m sure someone can help.
    I am trying to reproduce a similar text roll-over effect with jquery, as can be seen on the nav here: http://www.designshowliverpool.com
    Does anyone know where i might find the answer?
    Many thanks.
    C.

  51. Derleth

    April 28th, 2009 at 5:10 PM

    :O esta buenisimo :P gracias chato encima es gratis :D

    nice i love you xD

  52. lars

    May 1st, 2009 at 5:30 PM

    Has anyone had issue with the sliding boxes getting to work in Safari? I cannot get them to work in it on or offline. Has someone run into this problem? Anyone got a fix is there is a problem. (Using Safari 2.0.4).

    Thanks in advance.

  53. lars

    May 1st, 2009 at 5:39 PM

    And yes, javascript is enabled just in case you were going to ask.

  54. drew

    May 3rd, 2009 at 12:04 AM

    How can i get this to load into a div from thumbnails?

  55. rohnn

    May 3rd, 2009 at 5:40 PM

    @Lars.

    I have no problem running it on safari v3.1 on win XP.
    Would you happen to have an URL where we could check out your page & code ?

  56. ciddey

    May 5th, 2009 at 3:55 PM

    It is possible to do with this examples something like this ? http://mixcss.com/
    I have no idea :?

  57. cookie

    May 5th, 2009 at 7:28 PM

    @ciddey
    nice effect that matie.

    Anybody any wiser on how to produce this nav roll-over here then?: http://www.designshowliverpool.com

  58. Paul

    May 10th, 2009 at 9:38 PM

    I just tried this out and was up and running in about 10 minutes. Thanks for the great tutorial.

  59. Stephane

    May 13th, 2009 at 5:04 PM

    Problem :
    Table cannot be include in “.cover” element, CSS doesn’t works. Moreover “span class” is not fully recognized.
    See example :
    http://www.lacavedepheeric.com/index2.php
    The table I wish include is : http://www.lacavedepheeric.com/EssaiFeuilleVin.html

  60. Rama Mohan

    May 14th, 2009 at 2:53 AM

    Great! thank you

  61. web design

    May 23rd, 2009 at 12:01 PM

    This is wonderful tutorial! Love the sliding cover effect, is what i was looking at!

  62. Candace Haynes

    May 25th, 2009 at 10:05 AM

    I love this script… But I suck at this kind of coding (my mind won’t grasp it).
    What I want is…

    this script and
    http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding

    + a blender lol

  63. Laura

    May 26th, 2009 at 1:56 AM

    For the life of me I cannot get this to work in IE OR Safari. Works great in Firefox. Please help! I’ve followed the tutorial and downloaded the files, but am obviously missing something!

  64. wpdigger

    June 1st, 2009 at 12:49 AM

    I love the simplicity of it and I like the functionality. Great job on the tutorial.

    wpdigger’s last blog post..Theme Membership Sites – Are those really useful

  65. Tom

    June 8th, 2009 at 6:50 AM

    Great tut, really simple and beautiful…
    I have an issue though, maybe it is a stupid thing but I am getting stuck…
    It works well on my side when having one single page: on my main page I have a menu that “ajax” call the page containing my boxes… all links to js, css are on my index… and nothing happens…
    when i put my boxes onto my index, it works… looks like there a sort of dependency, but cannot find where… and kind of newbie with jquery…

  66. Nikolay

    June 13th, 2009 at 4:47 PM

    Thanks a lot! Very helpful.

  67. X-factor

    June 15th, 2009 at 2:08 AM

    Is there a reason why the alignment of my wordpress page is thrown off when I use this code? Please help.

  68. webmasterdubai

    June 19th, 2009 at 5:59 AM

    great job and nice work and good plugin.

  69. Gibi

    June 20th, 2009 at 8:52 AM

    Great work, i can add to jquerys.ru?

  70. Michael

    June 26th, 2009 at 9:11 AM

    @cookie how did you get it to work with lightbox. I’ve been trying but getting no where.

    @sam wow, great job!

  71. nathfla

    June 29th, 2009 at 12:03 AM

    hi how are you, just wanted to let you know that I love your tutorials.
    I have a quick question for you or anybody that can help me. I was trying out your:
    Sliding Boxes and Captions
    but its not working when i implemented in a new page, the caption box starts off in the middle then when you hover over it it goes to the bottom and then it hides, its going nuts i tell you… and i really did try, please advise me,,, what am I doing wrong.

    Thank you for your time guys

  72. nathfla

    June 29th, 2009 at 1:05 AM

    hey everyone sorry about the last help request, I was able to fix it… Ahhh love it I’ll share with you as soon as i’m done.

  73. JKLstar

    July 6th, 2009 at 3:12 PM

    Hello.

    I know this is the dumbest questions ever for the power brains, but .. huh … Where do I add my own photos?

    It is a 719px width and 480 height.

    This is sliding boxing is awesome and I’m gonna try hard to get it working.

    Thank you.

  74. Ross Naumov

    July 7th, 2009 at 6:19 AM

    I am trying to position multiple slide boxes side my side but i can’t seem to repeat the function properly. I have created one successfully but i now want to use this same function a few times on the one page. Can anyone help?

  75. Cedrick

    July 7th, 2009 at 12:15 PM

    woooowww! son lo maximo! esto esta genial lo estuve buscando por todos lados! un saludo chicos! son geniales! Gracias!

  76. ithemesdotnet

    July 8th, 2009 at 4:59 PM

    Awesome plugin! I can’t wait to implement it.
    .-= ithemesdotnet´s last blog ..Eventina WordPress Theme =-.

  77. estatic

    July 10th, 2009 at 9:39 AM

    I don’t know why this is happening, but for some reason the boxes just all of a sudden stopped working. Visually they look correct, but they aren’t sliding when the mouse rolls over it.

    Is this happening to anyone else?

  78. divpix

    July 23rd, 2009 at 6:47 PM

    I have this working correctly on a dev site in Firefox (Mac & PC), ie6,7&8 (PC). I have 3 boxes aligned and all is great … except … in Safari 3&4 (Mac) only one of the areas displays – the last of the 3 covers up the first two. I cannot figure out why. Any ideas?

  79. Sam Dunn

    July 23rd, 2009 at 6:57 PM

    @divpix
    I neglected to include DOCTYPE in the download/demo, I have heard a lot of people have fixed their problems by adding it in.

  80. Arthur Ebbinger

    July 25th, 2009 at 9:01 PM

    I am trying to implement this into a cubecart site for my company and everything shows properly except the captions don’t slide. I do have a bunch of other scripts that i have created and implemented that use jquery could these be causing any problems?

  81. Sam Dunn

    July 25th, 2009 at 11:01 PM

    @Arthur Ebbinger
    I would reference my previous comment and if that doesn’t work then I would try removing the other scripts for a test to see if they are impacting sliding boxes

  82. Justin Slack

    July 26th, 2009 at 9:06 AM

    Fantastic tutorial Sam. I’ve implemented it on my blog home page with a minimum of fuss.

  83. Noah Posnick

    July 27th, 2009 at 8:33 PM

    Having a bit of trouble with the script. Upon page load, the caption panel is shown when it should be hidden, when you put your mouse over it, it then slides down and acts as it should. I made sure all of the height values had “px” but that didn’t fix it.

    Please help. Maybe you can see something I’m overlooking. Thanks in advance! Here’s the work in progress site:

    http://www.thethrillmill.com/wip/

  84. Noah Posnick

    July 28th, 2009 at 1:16 AM

    Nevermind, got it. I didn’t see the “top” property in .boxcaption because it was buried after fixes for IE.

  85. Brett White

    August 3rd, 2009 at 9:23 AM

    Love it!!

    But I do have one problem, im wanting the box area to be a clickable link, not just a text link, how do I do that? Ive tried a few things but no luck, very much like http://www.tutorialmagazine.com, any advice would be great! :-)

    Cheers

  86. art is life

    August 3rd, 2009 at 6:05 PM

    Does anyone have a work-around fix for Active X blocking this?

  87. Madeglobal

    August 4th, 2009 at 6:45 AM

    Someone asked how to do this same effect in mootools (I think Jquery is easier to understand!). After much headscratching, I came up with the following code, which seems to work (I’ve only done the “peak” but you’ll see how to do all the others):

    window.addEvent(“domready”, function(){
    $(document.body).getElements(“.boxgrid.peek”).each(function(el) {
    var fx = new Fx.Morph(el.getElement(“.cover”),{ duration:200, link:’cancel’ });
    el.addEvents({
    “mouseenter”: function(){ fx.start({ ‘top’: 50 }); },
    “mouseleave”: function(){ fx.start({ ‘top’: 0 }); }
    });
    });
    });
    .-= Madeglobal´s last blog ..Wordpress Better Protected Password Pages =-.

  88. colorjuice

    August 9th, 2009 at 6:00 PM

    Hey, that’s a wonderful application. But it doesn’t work in my case. What I’ve done wrong? I’ve placed the code in step 3 in a html-document (in the body-tag), but when I look at it in a browser (firefox 3.0.13) it has problems with the css and the link http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/” href=”http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/” rel=”nofollow”>http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/” target=”_BLANK”>More Work . Can you help me? That would be very nice! Thanks a lot. greets colorjuice

  89. Sam Dunn

    August 9th, 2009 at 10:04 PM

    @colorjuice
    Typically if you include the DOCTYPE as I have mentioned above it irons out most problems if you followed the tutorial correctly. Good luck!

  90. Cracks

    August 11th, 2009 at 11:08 PM

    what about accessibility, and graceful degradation? how does this fair in those respects?

  91. web design glossop

    August 12th, 2009 at 7:57 AM

    Wow, these are really cool. I’m gonna implement these into our portfolio site very soon!

  92. sherie

    August 15th, 2009 at 11:51 AM

    Great Script – Many applications for use – Thanks for sharing :-) .

    @rohnn – Thanks for picking up on the css – missed that and was also obsessing that doctype was to blame – spent far too much time before reading your fix!!

  93. Vin Thomas

    August 18th, 2009 at 11:51 AM

    Great effect, but it doesn’t seem to be working right in the newest build of webkit.
    .-= Vin Thomas´s last blog ..8 Questions With Creator of Rethink Monthly, Bo Lane =-.

  94. Vin Thomas

    August 18th, 2009 at 11:54 AM

    It worked on refresh. Hmm…must not have loaded the script right the first time. Sorry…
    .-= Vin Thomas´s last blog ..8 Questions With Creator of Rethink Monthly, Bo Lane =-.

  95. Sheryll

    August 18th, 2009 at 12:44 PM

    Hi, I love this script and it worked great until I put it on the page it needs to be on with other scripts as well. I have javascripts pagination and lightbox scripts on the same page. I tested it and the cause of the sliding boxes not to work is definitely the other scripts on the page.

    Does anyone know how to fix this?

  96. jeff dunbar

    August 19th, 2009 at 6:32 PM

    This is pretty cool! I’ll have a play with this todayasfasfasf.

  97. schuessler

    August 20th, 2009 at 10:48 AM

    Another great article. Peaple who give this information a re a win for the web. Keep on going.

  98. naturmed

    August 20th, 2009 at 10:49 AM

    Thanks. I agree that is good.

  99. Sean

    August 23rd, 2009 at 12:00 AM

    Hmm… now, suppose you the original image with a css sprite of the original + final image that actives on hover, to get a completely degradable solution. That sounds ballin’.
    .-= Sean´s last blog ..Apache start problem =-.

  100. Mohammad Khalil Bin Said

    August 24th, 2009 at 5:25 AM

    A better sliding box/caption than the early that i found & use. This is very easy (page loading also), great for site and blogs.. thnku :)

  101. August 24th, 2009 at 2:38 PM

    Brilliant mates !!! Thanks for sharing…
    .-= Jµ´s last blog ..Hello world! =-.

  102. joão ramos

    August 24th, 2009 at 8:39 PM

    this is probably one of the best jQuery techniques EVER!
    .-= joão ramos´s last blog ..tom waits revisited =-.

  103. Bryan

    August 27th, 2009 at 5:00 AM

    Amazing. I like it. Will surely use it.
    .-= Bryan´s last blog ..10 Tips for natural SEO =-.

  104. Claudia

    August 28th, 2009 at 3:44 PM

    Really interesting and useful!
    Thanks a lot, it’s a fantastic job =)

  105. GSD

    August 28th, 2009 at 10:21 PM

    Awesome! thanks!

    Quick question though, is there anyway to make the slider go up 100% and completely cover the background image?

    Thanks a lot for the help.

  106. hasfa

    August 30th, 2009 at 8:10 AM

    Hi guys. I like ur scripts. It’s nice and wonderfull. I must show ur web at my group. Good work. Thanks

  107. gavin Steele

    August 31st, 2009 at 3:11 PM

    This is great, I would love a tutorial on how to implement this with Wordpress – Like how to get the post title into the text area OR get an image from a post into the box.

    Great tutorial

  108. Perdro

    September 1st, 2009 at 5:59 PM

    Hi everybody,
    This job is very good and i’m modifying it for a little website.

    I found a BIG problem in the demo. If user want to use key tab (for focusing), a layout’s bug occurs. the cover element is always up and if mouseover event occur, the effect is x2. I may be wrong but I think that it is not in the code (because it is only for the 1st and second that a problem is detected)

    For information, The problem is the same on other website like : http://www.tutorialmagazine.com/

    If anyone has an idea to debug…

  109. Lee Wilson

    September 3rd, 2009 at 3:45 AM

    Is there a solution for users with Javascript disabled, perhaps making the whole image clickable, this would mean that read more text wouldn’t be displayed (since the whole image will be the read more), but it would mean that if JS is disabled, the user can still get to the page it is promoting.

  110. DeveloperNetwork

    September 3rd, 2009 at 12:07 PM

    Nice article.
    Look at the second column of my site homepage. There is a slider.My Site HomePage

  111. Howard

    September 5th, 2009 at 1:57 AM

    You are the man!!!

  112. web

    September 8th, 2009 at 12:19 PM

    This is a truly wonderful script

  113. 1.april

    September 10th, 2009 at 10:42 AM

    thanks guys :)

  114. Martin

    September 14th, 2009 at 12:58 PM

    This is very nice – any idea how I can create a scroller with 5 or 6 images?

    Similar to this:

    http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html

  115. PSD to HTML

    September 15th, 2009 at 10:05 AM

    I had to come back and thank you for this. This was exactly what I was looking for and it fit right into a project I was working on.

    Great work and greatly appreciated
    .-= PSD to HTML´s last blog ..Wordpress plugins folder – OSNN Forum =-.

  116. Perdro

    September 17th, 2009 at 11:06 AM

    Thank you for your help Lee Wilson

  117. Rod Christiansen

    September 24th, 2009 at 12:16 AM

    Exactly what I was looking for !!!
    Thanks

  118. kiuz

    September 24th, 2009 at 3:27 PM

    Nice work!… can I translete in Italian language and Post on my New Drupal Blog? of course i add the trackback on this.
    .-= kiuz´s last blog ..Eliminare Account, Windows Live Vs Facebook =-.

  119. Anil Reddy

    September 26th, 2009 at 1:35 AM

    Awesome script..this is what i was looking for, thank you very much

  120. Mike

    September 27th, 2009 at 4:43 PM

    Nice work on this script!

    I’ve integrated it into the Wordpress native gallery (working on a plugin), but I’m having a weird issue with the the caption being active on page-load. Once you hover over the image, the script works fine, but I’m not sure why it auto loads as active.

    Anyone else have this issue?

  121. Mike

    September 27th, 2009 at 4:50 PM

    Nevermind. I noticed someone above had the problem.

    In the script, the .boxcaption top values don’t have “px” in them, which throws things off. Adjust those and you’re fine.

    Thanks again!

  122. Lee Wilson

    September 28th, 2009 at 12:59 PM

    Is there a way to overlay the image, let use the Kamil Smala image as an example, so there is an overlay of say 30% black, then when the user hovers it is removed, i.e. it comes into focus.

    Thanks

  123. Egypt Freelancer and web design in egypt

    September 29th, 2009 at 4:47 AM

    coooooooooool thanks

  124. Stefan Gustafsson

    October 1st, 2009 at 2:43 PM

    Thanks a lot for these, it will come in handy for sure :)

  125. Anthony

    October 2nd, 2009 at 2:50 PM

    Hi Guys,

    I got one problem that i cannot seem to fix. Everything is working great in FF and Safari, but IE is giving me a hard time (big surprise)

    I am using a jQuery slider to slide threw some Featured images in an unordered list. Only one image is displayed at a time until you click on the next/prev button to slide in the next image. Hovering over the image will display the box caption, everything works great.

    However in IE, all the images in the unordered list are displayed when the page loads. The box caption does work, but it throws my slider out of whack. Removing the box caption script makes the slider work perfectly again.

    Any suggestions on how to solve the issue?

    p.s. I have added “px” to any numeric values :)

  126. jdiz

    October 3rd, 2009 at 3:13 AM

    is it just me, or does the demo for this not work at all in Safari 4.0.3 or FF 3.5.3 on os x 10.6.1??

  127. jdiz

    October 3rd, 2009 at 5:13 AM

    ok, so i checked this on a different machine and it works now? very strange.

  128. Adam

    October 4th, 2009 at 7:24 AM

    @Sam & @Cookie
    Regarding the opacity problem i.e. the text is semi-transparent as well as the box, there is a simple fix for this.

    In the .boxcaption css rule, remove the opacity property and add background: rgba(0,0,0,.8); just below the existing background property. This won’t work in every browser but will solve the problem in Safari and Firefox at least.

    The opacity property sets every child element to be of the same opacity, whereas rgba allows just the specified opacity for that element. Hope this helps!
    .-= Adam´s last blog ..My Trip to Paris – Part 3 =-.

  129. Justin White

    October 10th, 2009 at 11:21 PM

    I love this! I’m only having one problem. When i test the page, in FF, and IE7/8 the cover is always at the top, and active… when i roll over it works normally, then disappears like it should. How do i get rid of the active state on page load? thanks in advance.

  130. Justin White

    October 10th, 2009 at 11:38 PM

    p.s Im using dreamweaver so DOCTYPE is already present at the top of the doc.

  131. Justin White

    October 10th, 2009 at 11:58 PM

    Example…
    http://img7.imageshack.us/img7/2760/exampleissue1.png

    thanks to image shack.

  132. Jason

    October 14th, 2009 at 10:15 AM

    can’t get this to work with lightbox. any help?

  133. Jason

    October 14th, 2009 at 1:15 PM

    to my above comment, nevermind.
    i used slimbox 2 and that solved everything.
    man this is gonna make my site so sick.
    thanks guys!

  134. Ryan

    October 14th, 2009 at 1:27 PM

    how would i get the Full Caption Sliding example to work if the height is not known or non constant?

  135. Justin White

    October 16th, 2009 at 3:09 AM

    still nothing. I’ve tinkered with the code and nothing seems to work. it still starts at the top on load and does disappear until i hover, and roll out. if anyone knows how to fix this, I can supply example html/code

  136. Justin White

    October 16th, 2009 at 3:18 AM

    ok..its official… patience is a virtue. read some of the above comments and that fixed it. so lazy of me

  137. jacob

    October 16th, 2009 at 5:03 PM

    Brilliant. Super easy..though unable to fix the active state issue that has come up.

    I have added “px” to every place possible and added the DOCTYPE.
    Here is what I am using in the css

    .boxgrid{
    width: 88px;
    height: 71px;
    margin-left: 488px;
    margin-top: 245px;
    float:left;
    background: #9DCB3B;
    border: solid 0px;
    overflow: hidden;
    position: absolute;
    z-index: 1;
    }
    .boxgrid img{
    position: absolute;
    top: 0px;
    left: 0px;
    border: 0px;
    }

    and the demo as it is:
    http://greenfootprintdesign.com/vcards/test

    Man I´d really appreciate any help I could get.. Hours have dwindled away trying to figure this out.

  138. Pinata

    October 19th, 2009 at 6:22 AM

    Hey,
    thanks so much for the tute, its very easy to follow and works great!
    However, I was wondering if its possible to center the elements on the page.. ive tried padding on the left to get it in the center (as the images are in a container), but the mouseover is in effect over the padding as well.. A faux ’spacing’ div can be used, but is there any other way?
    Cheers, Alex.

  139. Jacob Thompson

    October 20th, 2009 at 1:13 PM

    Has anybody used the “boxgrid peek” feature and been able to fix the active state issue that has come up? I read every single comment on here and added px to every possible numeric entry..
    Posted my css info in a comment or so above..would appreciate if anybody can help me figure out what i´m doing wrong?
    thanks thanks

  140. Egypt web design

    October 23rd, 2009 at 10:31 AM

    Thanks for the amazing trick i love it :)

  141. Jonathan

    October 27th, 2009 at 5:26 AM

    Has anybody successfully implemented this for wordpress? Because i have tried and no matter what I do it messes up the alignment of my webpage?

    Please help?

  142. chiangmai guide and tour

    October 29th, 2009 at 2:46 AM

    great tips And script, thankyou.
    .-= chiangmai guide and tour´s last blog ..Mandarin Oriental Dhara Dhevi ChiangMai Hotel =-.

  143. Noah Shrader

    November 6th, 2009 at 12:01 AM

    These are absolutely the coolest things. I used them for my portoflio page: http://www.webdesignersknoxville.com/portfolio.

  144. Noah Shrader

    November 6th, 2009 at 12:04 AM

    oops…http://www.webdesignersknoxville.com/portfolio

  145. egypt web design

    November 8th, 2009 at 6:48 AM

    thanks for this nice script.

  146. web design egypt

    November 8th, 2009 at 2:39 PM

    awesome
    that’s great post
    thanks

  147. chezza

    November 9th, 2009 at 11:49 AM

    I love the functionality of this, but I’m struggling to get it working in Joomla.

    I get the following javascript error:
    $ is not defined
    [Break on this error] $(document).ready(function(){\r\n

    Not sure how to fix it, so any help very much appreciated.

    Just starting out with javascript so maybe this is something very straightforward.

  148. chezza

    November 9th, 2009 at 1:15 PM

    found out what the problem was and it was a conflict with the mootools.js library (which is loaded by default with joomla). Disabling this fixed the problem.

  149. Chris

    November 10th, 2009 at 2:38 PM

    Is there a plugin for this for Wordpress?
    I don’t know how to integrate it manually within a theme.

  150. tuna

    November 10th, 2009 at 4:58 PM

    verry impressive..
    .-= tuna´s last blog ..Photoshop’ta Hoş Bir Girdap Yapımı =-.

  151. omni osi

    November 15th, 2009 at 12:02 PM

    I’m having trouble having 2 boxgrid windows of different sizes work with sliding captions in my page. The second size caption isn’t visible initially but will appear and work correctly on rollover.

    What is the correct way to code various sized Container Windows in one HTML page?

    thanks for everything!

  152. Jamo

    November 18th, 2009 at 11:03 AM

    How can I strip out the JS and include it from the HTML file?

  153. Emeract

    November 18th, 2009 at 3:05 PM

    Just want to start by saying that I love this effect. Thanks for creating the tutorial.

    I’m having trouble getting a 2 column fixed layout to work correctly below the sliding boxes in Firefox v3.5.5. The code looks right in Safari (Mac).

    Here’s a link to the demo page. http://www.emeract.com/jm-web/index2.html Any ideas on how to fix the floats/positioning/whatever to make it cross-browser compatible?

  154. Emeract

    November 19th, 2009 at 9:03 AM

    By process of elimination, I found out that the opacity values under .boxcaption were breaking the layout. You were right about it being a rough topic!

  155. katoratz

    November 25th, 2009 at 8:47 AM

    I really appreciate you sharing this!

    I read through all of the comments so far and noticed that a couple of people have the same issue as I am having. I load my gallery into my main page with a separate jquery script and it seems to disable/conflict this effect. I can’t seem to figure this out for the life of me.. anyone have a fix?

    thnx in advanced :)
    http://tmwebstudios.com/internetstudio/web-design.html

  156. Chimera Studios web design

    December 5th, 2009 at 7:56 PM

    Very cool stuff indeed!

  157. Matthew

    December 6th, 2009 at 12:41 PM

    Practical and useful. This blog could benefit from reply links, several others asked questions about the plugin.

  158. SDK

    December 8th, 2009 at 10:16 AM

    Hi brilliant script..

    I need to use more than one instance of the script on the same page.

    How do i go about doing that?

    thanks!

  159. daddycool

    December 8th, 2009 at 9:35 PM

    Nice jquery thanks for sharing

  160. Amin Esmailzadeh

    December 14th, 2009 at 10:09 AM

    Nice Job. Your Job is A Big feat.and your is marvelous.with the best regards for you good luck .

  161. Bora

    December 21st, 2009 at 11:32 AM

    I use flash galleries http://flash-gallery.com. Easy to install and modify. Flexible appearance settings

  162. Mike

    December 23rd, 2009 at 3:43 AM

    Great job, i will be sure to use this for my next project.

  163. John

    December 23rd, 2009 at 3:45 AM

    Impressive, i always love javascript over flash for this great reason

  164. Abhisek @ AbhiTech

    January 2nd, 2010 at 9:04 AM

    Excellent! Bookmarked!

  165. Graham

    January 10th, 2010 at 10:18 AM

    I was having trouble with the caption loading in the visible position as well.After adding the unit type after the positioning it helped but didn’t fix it completely I had to make sure my positioning in the CSS was the same as the positioning for the idle state in the Javascript. Hope this helps some people

  166. trey

    January 13th, 2010 at 4:20 PM

    For some reason when I use the Vertical Sliding boxes, I go to the page I’m using them and while the page loads and before you hover over it, it looks like this

    http://i50.tinypic.com/21m6xkh.jpg

    but after you hover over it and the page is fully loaded it comes to look like this.

    http://i48.tinypic.com/s145mc.jpg

    And thats how it’s suppose to look from the beginning but for some reason it locks up top until you hover over it and it will slide to the bottom. Anyone know what I’m doing wrong?

  167. pakistani designer

    January 13th, 2010 at 9:38 PM

    this is really nice thanks :)

  168. Peter Yee

    January 14th, 2010 at 11:40 AM

    not working in html5 doctype…

  169. anadikt

    January 15th, 2010 at 3:48 PM

    thanks for this slideshow plugin

  170. PUA

    January 15th, 2010 at 9:30 PM

    Hey, great script I’m going to implement this on my website because I like the visual appeal ( http://www.puahub.com ) hopefully it will help increase my readership. thanks

  171. andremoda

    January 21st, 2010 at 3:29 PM

    What a cool Tutorial, good Stuff. Many Thx.

  172. Simon B

    January 25th, 2010 at 2:32 PM

    This may have been up here for a long time, but this is an absolute classic.
    Thanks Sam and Zach,
    Simon

  173. JC

    January 28th, 2010 at 4:18 AM

    Hi, great stuff here, works great.
    However, I have a problem, probably because I’m a noob.
    I can’t get the thing to be centered onto the page. I tried the “div container” css trick, but it does not work at all. Can anyone tell me how to center the html so the content would sit center in the browser? Thanks.

  174. JC

    January 28th, 2010 at 11:19 PM

    ah, found the answer, turns out my markups were off. Anyways, great script!

  175. Nocleg

    February 4th, 2010 at 10:07 AM

    hanks for this slideshow plugin

  176. Corey

    February 5th, 2010 at 8:49 AM

    JC – how did you wind up doing it? I had tried getting this to center on the page before, too, but never had any luck.

  177. Corey

    February 6th, 2010 at 1:24 PM

    Okay, so I’ve figured out how to get the images center in a DIV… but I can’t get more than one image in a row. Rather than displaying three or four across, it just piles them on top of one another down the page. I’m not really sure where to go from here. Has anyone else run into this problem?

  178. Xdj

    February 7th, 2010 at 7:26 PM

    Is there a way to have the animation slide be automatic rather than, mouseover. Maybe have it slide up for 10 seconds and then down for 15, then repeat, thanks!

  179. David

    February 8th, 2010 at 2:01 PM

    Hi, I have had an issue with it placed inside of a couple of DIVs.

    When the page is loaded/refreshed, the caption starts at the top of .boxgrid instead of hidden below (like the boxcaptionfull transition)

    is there something i should be aware of? Any help or advice would be great.

    Cheers!

    David

  180. Neto

    February 11th, 2010 at 4:13 PM

    Very well!

    Amazing galery, congratilations!!!

  181. Craig

    February 14th, 2010 at 9:11 PM

    How would I add delay to the effect? i.e. have a 2 second delay before the text/etc. slides out?

  182. daniel

    February 21st, 2010 at 1:06 PM

    Hi!
    I did not go trough all discussion if there is a coment about conflict with this js and some other js like for example jquery.droppy.js menu wich Im getting when I import this js.. is that right or am I doing something wrong? thanks!

  183. Daniel Nelson

    February 28th, 2010 at 4:05 PM

    Hi

    I too have an issue with the JS not loading properly, but I am guessing it is conflicting with another JS that is loading.

    I have managed to get the script working perfectly here:
    http://www.johnstrand-mk.co.uk.server64.ukservers.net/boxes/

    But, once placed in the CMS it no longer works: http://www.johnstrand-mk.co.uk.server64.ukservers.net/

    I would really love to get a solution for this because I would rather not use a rollover state which is time-consuming and restrictive.

    Thanks in advance and, by the way, lovely script and nice looking website.

    Daniel

  184. Daniel Nelson

    February 28th, 2010 at 4:12 PM

    Okay, after a quick look around, I have discovered that the mootools.js script that loads for my AjaxSearch in MODx is causing issues. I need this to load for the search to work properly, so do you have any ideas what I might be able to do?

  185. Joey

    March 7th, 2010 at 5:06 AM

    1. .captionfull .boxcaption {
    2. top: 260;
    3. left: 0;
    4. }
    5. .caption .boxcaption {
    6. top: 220;
    7. left: 0;
    8. }

    for whom those use Doc Type, it needs to add “px”, something like top: 220px instead top: 220;

    please fix that in your demo

    btw, good coding, cheers

  186. George Dean

    March 9th, 2010 at 2:07 PM

    Question. I try to replace an image (the exact same size) and the new image won’t load. Its 325X260.

    So, then I take one of the existing images and duplicate it and rename it.. example “nonsense.jpg” to “nonsense2.jpg” and the “nonsense2.jpg” won’t load…

    Any clue what I am doing wrong??

    George

  187. George Dean

    March 9th, 2010 at 2:24 PM

    Follow up… when I copy and paste the “nonsense.jpg” and rename it to “nonsense2.jpg”, it works BUT when I load “nonsense.jpg” in photoshop and then save it as “nonsense2.jpg” it won’t load when I run the index.php file.

    That is soo weird to me… I use photoshop everyday for web publication.

    I can’t figure it out.

    George

  188. George Dean

    March 9th, 2010 at 3:07 PM

    Update II:

    Weird.. it works in firefox but not IE…. BUT, your jpgs load in the IE!

    George

  189. Patrick

    March 9th, 2010 at 3:43 PM

    Good tutorial.

    Any ideas on how to get this to work with Json and flickr script..? So that you can load in images onto your site and then the captions can slide open to show them.

  190. Xcellence IT

    March 10th, 2010 at 1:57 AM

    Thanks for this great tutorial.. I was looking for something similar to this…

    Thanks

    Regards
    xcellence IT

  191. Wilder

    March 11th, 2010 at 1:55 AM

    I love this effect but want to resize it to say 196px wide, I’ve tried it with an image this size and resizing the values but no joy! any suggestions?

  192. Indialike

    March 12th, 2010 at 1:36 AM

    Very nice and useful tutorials for web designers,
    Thanks for posting.

Join the Conversation!

Remember: Life's not all doom and gloom, so please keep it constructive. If we've made an error or missed something big, please let us know! Learning is revisions, after all.

CommentLuv is Enabled

 

Sponsors

Advertise on Build Internet!