jQuery Sliding Boxes and Captions create an awesome look and feel for picture galleries and are great to get more content in for SEO. jQuery makes it possible to create really cool caption effects when a user hovers over an element on page such as an image. If you have done and research about sliding box captions via Google then you may have stumbled upon Sam Dunn’s post entitled: Sliding Boxes and Captions with jQuery. This is a very cool tutorial and the demo is fantastic as well. But what about easing?


You can use the same CSS as the demo or style your own. Here’s the CSS used for the demonstration to work from:

Code for jQuery Sliding Boxes with Easing

The jQuery .animate(); method allows us to easily specify the easing effect using .animate( properties, [ duration ], [ easing ], as seen below. For this to work the jQuery Easing Plugin must be included on your site.

Keep in Mind…

You will have to tweak the pixel amounts for the captions depending on your design. As well, you are fully capable of changing the easing from my default “easeout” to others.

Demo Coming Soon!

Looking for the demo? It’s coming soon. For now, if you are having trouble implementing easing in your

Devin Walker is a San Diego-based WordPress Developer and enthusiast. He is the author of several popular and highly-rated WordPress themes and plugins. In his free time he enjoys playing Golf and traveling.

Follow Devin: