Simplicity. Adding animation effects to your pages has never been easier or faster. With HoverAlls you can create ToolTips, Scrollers, Captions, Lightboxes, and Sliding Panels - 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 specific structure. With only 8 lines of CSS, HoverAlls removes any possibility of wasting time trying to make sense of a plugin's naming conventions. No knowledge of Javascript or jQuery is required, however the plugin is extendable.

Coordinates. A simple coordinates system creates animations. Using HoverAlls settings, you define the Start, End and Return Coordinates. ( starts:"x,y", ends:"x,y", returns:"x,y" ). Since HoverAlls is receiving specific coordinates, you are in full control over where the animation occurs. HoverAlls allows for full animation control with these 3 simple settings, providing the flexibility to create many types of effects.

Classes. HoverAlls will automatically go out to each HTML element with a specified class and build the animation effect for you. Text and links are pulled from either images or HTML elements. Above: the two objects on the left are images and the two on the right are DIVs with background images. Classes are only recommended for elements with the same dimensions.

Target Containers. One of the most powerful features of HoverAlls is the ability to select your Target Container. HoverAlls effects don't need to occur on the object being hovered or clicked. The Target Container setting lets you select where you want the animation to occur. Additionally, an HTML Mode setting is available. Passing the ID of a container to this setting will automatically move that block of code into the HoverAlls animation. If a Target Container is set, your block of HTML is moved within the Target Container.

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.

The HTML Mode Setting
This setting will move a block of code into the animation container, where you can use other HoverAlls settings to manipulate it. In this example, a setting is used to tell HoverAlls it's a sliding panel, then a Target Container is chosen - the white background. A separate block of code (containing this text and the HTML5 logo) is coded anywhere on the page. Supplying the ID of this block of code to the HTML Mode setting automatically moves the code into the animation container (and inside of your Target Container if you have one).

Code Faster. HoverAlls is built to increase production time by making the approach to every obstacle exactly the same. With a focus on increasing productivity, HoverAlls also includes built-in animation presets. Once your effect is fine-tuned, save it to a "preset setting" and use it on other elements, or other websites. You can also detect Mobile Devices (users running webOS, iPhone/iPad/iPod, Windows Phone 7, Android Phones, and Blackberry Phones) and create special HoverAlls effects for those environments.