Captions, Galleries & Navigation

Image Usage

There's no need to change the way you write HTML or CSS. HoverAlls is flexible, and works around your code.

HoverAlls comes with minimal code. You don't have to make sense of long stylesheets or odd naming conventions.

A sophisticated, yet simple Coordinates System allows you to set animation points.

DIV

DIV with Link

Injecting HTML

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor

Sliding Panels, Scrollers, & Tickers

This is a basic example of a sliding panel using a quick HoverAlls setting.

Sliding Panels.
Quickly build Login Panels, Tours, Social Media Panels, etc.

You can place your text the same as any other HoverAlls effect, or you can opt to use the HTML Mode setting. Using this setting allows you to build your Sliding Panel by writing HTML however you like, wherever you like. Pass the ID of your code to the setting to have HoverAlls automatically move your HTML into the animation container.

Creating Sliding Panels is easy - and done the exact same way as everything else. HoverAlls gives you complete control over the position, movement, timing, transitions, style and much more.

Easily make scrollers inside your lightboxes, captions, tooltips and target containers.

Position and style your scroller however you like.

Below is a demonstration of how to implement HoverAlls on an image. This is the exact same way to build any other HoverAlls effect — just change the HoverAlls settings to tell HoverAlls what you want.

1. HTML

<img src="../to/image.jpg" alt="Your Caption Text" rel="http://www.yourlink.com" class="caption" />

Use the ALT attribute to quickly insert your text and the REL attribute for your link.

2. Call HoverAlls

$('.caption').HoverAlls({
// Sets Animation Path of Container (in %)
"coords" : "StartX,StartY || EndX,EndY || ReturnX,ReturnY",
// Sets Animation Path of Text (in %)
"text_coords" : "StartX,StartY || EndX,EndY || ReturnX,ReturnY",
// Dynamically Assign Class ".myCaption" to Caption Background
"bg_class" : "myCaption",
// Dyanically Assign Class ".myCaptionText" to Caption Text
"text_class" : "myCaptionText"
});

Write a block of HTML and pass the container's ID to HoverAlls to automatically inject it into your HoverAlls effect. You can also animate the HTML after injecting it into the effect.

HTML Mode
This setting will move a block of code into the animation container, where you can then use the normal HoverAlls Text Animation Settings to manipulate it. In this example, the effect is defined as a Sliding Panel. A separate DIV (containing this text and the HTML5 Logo) is added anywhere on the page. Supplying the ID of this DIV to the HTML Mode setting automatically moves it into the animation container.

Optionally write HTML anywhere on the page, then inject it into any HoverAlls Animation for advanced effects. Quickly add text and links using the "hv_link" or "hv_text" classes as shown below.

1. HTML

<div id="injectHTML">
<p class="hv_text"> Animate this text too! </p>
<a class="hv_link" href="http://www.yourlink.com"> Link </a>
</div>

2. Call HoverAlls

$('.panel').HoverAlls({
// Define Animation as a Sliding Panel
"mode" : "panel",
// Sets Animation Path (in %)
"coords" : "StartX,StartY || EndX,EndY || ReturnX,ReturnY",
// Move the Above HTML into the Sliding Panel
"html_mode" : "#injectHTML"
});

Turn this into a Tooltip using ("mode" : "tooltip"). Effortlessly convert the HoverAlls Text into a Scroller (inside any effect) by simply adding ("ticker_mode":true)