Thanks! Please check the following:
System requirements
This stack requires RapidWeaver and the Stacks plugin. It will not work with other platforms (like Wordpress). We recommend you aim towards installing the latest version of RapidWeaver and Stacks that your computer is compatible with.

License agreement
You may use this purchased stack an unlimited number of times in personal or commercial projects, request technical support and receive free updates in future.

This stack can be installed or synced onto all computers that you own. You are permitted to make archival backup copies of the stack.

You may not resell or make this stack available for download, remove copyright credits or license information.

The software is provided "as is" without any implied or expressed warranty of merchantability or fitness for purpose. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise arising from, out of or in connection with the software or the use or other dealings in the software.

Refund policy
By purchasing this stack, you agree that your purchase will be available immediately via digital download and that you waive your statutory right of withdrawal.

All purchases are final and refunds will not be provided (we physically cannot un-download or remove stacks from your computer).

You are reminded to make use of the free demo versions already provided on the website, to fully evaluate stacks for compatibility and suitability before purchase.

Customer support
If you have questions that relate specifically to this stack, you should make contact via the contact page. We aim to answer all messages within 12 hours, Monday to Friday.

If you require a faster response at weekends or during public holidays, please post your question(s) to the RapidWeaver forums, where a support volunteer may be able to assist you quicker.
A great product, the standard of which exceeds many others in this category.
Version 4 is a free update and 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.


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 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.
HoverBox static image
HoverBox hover image
HoverBox static image
HoverBox hover image
HoverBox static image
HoverBox hover image
HoverBox static image
HoverBox hover image
HoverBox static image
HoverBox hover image
HoverBox static image
HoverBox hover image
HoverBox static image
HoverBox hover image
HoverBox static image
HoverBox hover image
HoverBox static image
HoverBox hover image
HoverBox static image
HoverBox hover image


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.
Bookmark or share this page
Baidu 百度
Renren 人人网
Weibo 微博
Contact Us
Email This Page
Print This Page
PS: This bookmarking and sharing popup is powered using our brilliant SocialPopup stack!
We use cookies to give you the best possible experience on our website. If you continue without changing settings, we'll assume that you are happy to receive all cookies.