Check out the demos

HoverUp Demos Go check out the demos!

HoverUp is a flexible, yet very lightweight, jQuery Plugin to easily add animated captions to pictures or other content. I'll let the demos do the talking.

Installation

Step 1 · Load the script

For starters, you include the required javascript files in the <head> of your HTML document.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="path/to/your/jquery.easing.1.3.js"></script><!-- optional -->
<script type="text/javascript" src="path/to/your/jquery.metadata.js"></script><!-- optional -->
<script type="text/javascript" src="path/to/your/jquery.hoverup.pack.js"></script>

Note that in the snippet above, I am loading a Google hosted jQuery copy. You can host it yourself too. Also, I am loading the jQuery Easing Plugin for additional easing effects. This file is optional. If you want to make use of the Metadata Plugin be sure to load that one as well. Finally, you load the HoverUp Plugin. Remember to change the src path to match the location of the file on your server.

Step 2 · The markup

The HoverUp Plugin is very flexible. As you can see from the demos, it allows you the freedom to design your captions the way you want. Doing so, obviously requires some HTML and CSS skills; however, the HTML and CSS of the demos is fully included and ready to easily be “copied and pasted”.

Structure

There's one important rule to keep in mind. The content you want to apply HoverUp to should consist out of three basic elements, as shown in this example:

<a href="http://example.com/"><!-- 1. wrapping box -->
	<img src="photo.jpg" /><!-- 2. content -->
	<small>Photo caption</small><!-- 3. caption -->
</a>
  1. A wrapping box, could be a <div>, an anchor, or another block element.
  2. A content element (the first element inside the wrapping box).
  3. A caption element (the second and last element inside the wrapping box).

Step 3 · Showtime!

Finally, all that is left to do, is to connect the HoverUp Plugin to the wrapping boxes. Append the following piece of javascript to the <head> of your HTML file. Alternatively, you could move it to an external file.

<script type="text/javascript">
$(document).ready(function() {

	$('.your_boxes').hoverup({
		// Define any options here
	});

});
</script>

Again, feel free to look at the source of the demos if you want to work from live examples. Have fun!

Options

Options listed in alphabetical order

Option Description
easingIn string · Default: 'swing'
The easing function to use for showing the caption and shifting the content.
easingOut string · Default: 'swing'
The easing function to use for hiding the caption and reshifting the content.
fade boolean · Default: true
Whether to fade the caption in and and out while showing and hiding it.
Note that you may want to set this option to false if you're experiencing issues with semi-transparent PNGs in Internet Explorer (more about this).
position string · Default: 'bottom'
The position of the caption. Choose between 'top' and 'bottom'.
reverse boolean · Default: false
Set reverse to true to initially show the caption, and then hide it on hover.
shiftContent mixed · Default: false
If you don't want to animate the content, just leave it set to false. Two other options are available. Either you set it to the string 'push' which will make the caption push the content away, or you set to an integer value which determines the number of pixels the content will be pushed (negative integers allowed).
speedIn integer · Default: 'fast'
The duration (in milliseconds) for showing the caption and shifting the content. You can also use the predefined 'fast', 'normal' and 'slow' strings.
speedOut integer · Default: 'normal'
The duration (in milliseconds) for hiding the caption and reshifting the content. You can also use the predefined 'fast', 'normal' and 'slow' strings.

Global defaults

You can easily change the default values for the options listed above. Just include the following javascript. This only needs to be called once. Of course, you can set all options to whatever you like.

$.fn.hoverup.defaults = {
	fade:     false,
	position: 'top'
	// Etcetera
}