A great product, the standard of which exceeds many others in this category.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.
ExamplesHere 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.
SetupThe emphasis of HoverBox is on ease of setup. Follow these instructions for getting a single HoverBox working in your page:
- Once downloaded and installed into RapidWeaver / Stacks, open the Stacks library and drag and drop a copy of HoverBox into your page
- 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
- Customise any further options in the stack settings, like touch screen behaviour, animation effects or apply a link to the HoverBox
- 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.