Stacks4Stacks

A great product, the standard of which exceeds many others in this category.
Rob

Version 4 is completely rebuilt from the ground up! Featuring a leaner codebase, more animation effects and more supported content types. This is by far the best build of HoverBox available. Developed on the mobile-first principle, HoverBox helps create responsive, touch-compatible content blocks and mouseover enhanced animation effects. Pure CSS animations keep pages running smoothly; even in instances where many HoverBox stacks exist. Although mainly intended for images, HoverBox can certainly handle other basic content types (like text, HTML code and Markdown) with ease. The simple ten 2D animation effects available in HoverBox work in all major web browsers, including newer versions of Internet Explorer.

In some respects, HoverBox is similar to the ImageWizard stack. Both share some of the same features and settings. However a key difference with HoverBox is that it deals with two separate layers of content on mouseover (ImageWizard only applies animation effects to one single image layer). This makes HoverBox the more powerful of the two stacks, for creating mouseover effects. Plus you have options to choose how HoverBox should work on touch screen devices, where mouseover support is typically unavailable.

Examples

Here are some working examples of the HoverBox stack. All examples use the same dawn and dusk images and have been set as links to http://example.com. A different mouseover animation effect has been applied to each example. On touch screens, HoverBox has been configured to only display the static layer. The responsive grid was constructed using the free AdaptiveGrid stack.
 

 

Setup

The emphasis of HoverBox is on ease of setup. Follow these instructions for getting a single HoverBox working in your page:

1. Once downloaded and installed into RapidWeaver / Stacks, open the Stacks library and drag and drop a copy of HoverBox into your page
2. In edit mode, drag and drop content into the two placeholders shown; Static Layer and Hover Layer. Images of the same size are good to practice with
3. Customise any further options in the stack settings, like touch screen behaviour, animation effects or apply a link to the HoverBox
4. Preview the page to see what the HoverBox looks like and how it behaves on mouseover. Publish the page when ready

You can safely use multiple HoverBox stacks on the same webpage. For best results, use simple content types inside HoverBox, like static text and images. To create a responsive grid of images that change on mouseover, you can place HoverBox stacks within our free AdaptiveGrid stack. Other free stacks we provide like Deli or TintStack may also be of help to you, when creating images with text overlay effects.

The Emulate Touch Screens checkbox setting can be used to see how HoverBox will look and function on touch screens without mouse input. Options exist to display only one HoverBox layer or display both layers simultaneously. Remember to turn-off the emulation setting, before publishing your webpage public.

Maximum and minimum heights

HoverBox works best if the static and hovered content you enter is of the same dimensions. In the example of images, it might otherwise look a bit odd if a hovered image appears at a different size to the static image. Normally the static layer governs the size of the HoverBox stack. You should always try to provide static and hovered content that is the same dimensions. If this is not feasible (like when using text stacks), then the max and min width settings can be used. Maximum height determines the maximum height that content is permitted to grow to (overflowing content will be cropped and hidden from view). Minimum height does the opposite and determines the minimum height of the HoverBox stack. HoverBox will always stretch to fill the width of whatever page area it is placed within.

Applying links

Checking the Apply A Link setting allows you to make the entire HoverBox stack a clickable link. You can configure HoverBox to link to an anchor on the same page, another page in your website, an email or telephone number or an external website. Custom attributes can be applied to the link; like the ability for the link to open in a new tab / window or trigger another event, like a lightbox or modal popup.

Custom CSS code

If you have knowledge of HTML and CSS code, you'll find its possible to apply additional styling to HoverBox. The stack container, the static and the hovered layers all have class attributes. You can reference these classes as selector names, when writing your own CSS code.

Detection of touch screens

The detection of touch screens on websites is actually very tricky. It is not a supported option in normal feature-detection plugins, like Modernizer. Problems can arise, in that some handheld devices don't advertise themselves to HoverBox as being touch screens, and it is also perfectly feasible for a website user to have a touch screen desktop PC or laptop, which simultaneously also has a normal mouse and keyboard plugged into it. We have opted instead for a small script in HoverBox that detects if the web browser is one of either iPod, iPhone, iPad, Android, Blackberry, Samsung, Opera Mini or IE Mobile. It one of these user agents is detected, then we assume the device viewing the website has a touch screen.