Caption with icon
You are free to style a caption the way you want.
This caption has an icon and is a bit higher.
Camera icon by Oxygen Team.
This page is filled with demos showing off many of the available options and possibilities for the jQuery HoverUp plugin. Just hover over the boxes to get a feel of what HoverUp is capable of.
Ready to start playing yourself? Have a look at the source code of this page.
The caption styles are set via different CSS classes.
The options for HoverUp are passed along via the class attribute of the box, via the jQuery Metadata plugin.
Default caption
Basic caption using the default options
Using shiftContent:20
The content shifts too, creating a subtle effect
Using shiftContent:'push'
Creating a sliding effect
Using position:'top'
Look at me! I'm up here! Coming in with a bouncy effect.
Using shiftContent:-40 and slower speedIn
Caption with icon
You are free to style a caption the way you want.
This caption has an icon and is a bit higher.
Camera icon by Oxygen Team.
Reversed effect
This caption will hide on hover.
Simply set reverse to true.
Using shiftContent:-40 and reverse
©2010 Photo by John Doe
HoverUp doesn't work on images only.
As you can see this box could contain any arbitrary HTML.
The size of each box can vary as well.
Use HoverUp on HTML boxes too
HoverUp has been designed with flexibility in mind. Yay!
I mean, look at the colors of this caption. Ahum.