loading hoveralls demo
build 2.6

Captions.   Lightboxes.   Tooltips.   Panels.   Scrollers.

The lightweight effects framework for all your mouse adventures.

Simplicity. Adding animation effects to your pages has never been easier or faster. With HoverAlls you can create ToolTips, Scrollers, News Tickers, Captions, Lightboxes, Sliding Panels, Alerts and much more - all by using the same methods and settings. HoverAlls is extremely flexible, allowing you to write HTML however you feel comfortable. Without the need for a specific structure, HoverAlls removes the possibility of wasting time trying to make sense of plugin naming conventions, or lengthy CSS. No knowledge of Javascript, CSS3 or jQuery is required and separate walkthroughs and tutorials are provided for each type of animation effect.

Captions, Galleries & Navigation

Image Usage
Highly Customizable
Simple, Easy and Fast
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.
Animate Text
A sophisticated, yet simple Coordinates System allows you to set animation points.
Perfect Segues
Full Screen
View Image

Coordinates. A simple coordinates system makes creating complex Animation Paths easy. A single HoverAlls setting allows you to define the Start, End and Return Positions. ( "coords" : " StartX, StartY || EndX, EndY || ReturnX, ReturnY " ). With specific coordinates, you are in full control over where the animation occurs. You can also define an Animation Path for the Text Element using the "text_coords" setting - the exact same way.

Build it all the same way... using your HTML and your CSS

Image
Image with Link

DIV

DIV with Link

Classes. Easily setup and configure animation effects on multiple elements at once - then use the data-HoverAlls attribute to customize each effect individually. The two left elements above are images and the two right are DIVs with background images. Weighing in under 10K, HoverAlls may possibly be lighter than writing animation-specific CSS.

Lightboxes, Alerts, Popups & Tooltips

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
Making Tooltips has never been easier, now there's no excuse to leave them out.
Make every tooltip unique.
Woah. This looks pretty cool, but I'm still watching out for that cat.

Target Containers.A powerful feature of HoverAlls is the ability to select your Target Container. HoverAlls effects don't need to occur on the object being hovered, touched or clicked. The Target Container setting lets you select where the animation occurs. Additionally, the HTML Mode setting allows for injecting your own custom HTML into any HoverAlls effect - and optionally animate it.

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.
Lorem ipsum dolor sit
Easily make scrollers inside your lightboxes, captions, tooltips and target containers.
HoverAlls
Position and style your scroller however you like.
This example uses a scroller inside a target div. This can be called on page load and is ideal for news, articles, announcements, etc.

Powerful. Any HoverAlls effect can be triggered by Click, Touch, Hover, Page Load or when Scrolled to a specific element - for unparalleled animation flexibility. All effects and events have been optimized for mobile devices. Version 2.6 adds new features including chainable 2D/3D animations and text crawlers.

30 Simple Settings

Trigger any type of HoverAlls effect on Scroll
Now with HoverAlls 2.6 you can Flip, Rotate, Scale or Skew any type of effect using easy settings.
Only 10k
a long time ago, in a galaxy far, far away...

Design Faster. HoverAlls is built to decrease production time by making the approach to every obstacle the same. Version 2.6 is a completely re-written free upgrade, introducing some exciting new features as well as full hardware acceleration, responsive animations and a 55% file reduction - possibly making HoverAlls the lightest all-in-one solution.

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

Lightboxes

Creating a Popup is as simple as creating a Caption - and done the same way...

There are additional settings available when creating Modals, Lightboxes or Alerts. This basic modal is positioned using the Coordinates System (like any other HoverAlls effect). Rather than being centered on the screen, it's positioned according to the Start, End and Return Coordinates. If you like, you can use a simple setting to center the modal on screen, but still keep control over the starting position.

Extreme
Customization.

Run away!

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.

Close

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)