HoverBox Maybe not gravity-defying, but cool nonetheless.
A great product, the standard of which exceeds many others in this category.Hover and rollover effects are a common feature in many modern websites, and can be used to enhance the usability of a website and create an altogether more interactive experience for end users. Technically, creating a satisfactory hover-effect in websites is challenging, due to the vastness of web browser support and the use of complicated code.
Rob
The HoverBox stack is a flexible solution, enabling RapidWeaver users to create a range of highly-polished rollover effects in a website. HoverBox contains just about all the features someone would need to create rollover effects, and delivers great results time and time again. The best thing is that all the complicated code and laborious browser testing has already been done for you, so HoverBox is very much a solution which can be setup and working within minutes.
HoverBox basically comprises of two layers - a static (base) layer which is permanently displayed and a hovered layer that only comes into view when it's triggered by a mouse rollover. You can add content to both layers, simply by dragging and dropping your content into the marked placeholders in edit mode. A lovely selection of settings exist, enabling you to precisely control the animation options, dimensions and backgrounds.
Examples
Advertising Banners
Create vivid advertising banners using normal text stacks. CSS and embedded fonts can be used to add distinctive styling.Banners can be set as links through to other pages, downloads, resources or external websites. The first anchor tag detected in a hover box will be used.
What is RapidWeaver?
What is RapidWeaver?
RapidWeaver makes it ridiculously easy to create stunning websites on your Mac. Whether you're building your very first website or your fiftieth, RapidWeaver provides you with the know-how to quickly publish websites to be proud of.
No matter what you want to build - be it stunning online photo-slideshows straight from your iPhoto library, a company website or your own blog - RapidWeaver lets you do it with a minimum of fuss.
Questions & Answers
The hover effect can be used to hide and reveal content on mouseover. This could be useful for creating interactive FAQ's or simple quizzes on a website.
Navigation
Simple navigation links can be created using images. Unlike Flash equivalents, the Hover Box Stack produces fade-effect buttons which are compatible with all major web browsers, including iOS devices. Buttons can be stacked vertically to form a block navigation layout, or you can use columns to achieve a horizontal navigation layout.
Collage Effects
Mix monochrome and colour images together to create an interesting fade effect. If using column Stacks, a grid college effect could be created. The Hover Box Stack can be used multiple times on the same page.Image Magnifier
Use a mixture of scaled images to create the illusion of a simple image magnifier. In this example, the same image of a perched Robin is used, but the second (hovered) image is cropped down to a smaller size and was re-scaled.Both images are stored on a separate web server and are pulled in using the image warehouse background options.
Annotations
Another example of image switching is the use of annotations. An annotated image and non-annotated image can be combined together in a single Hover Box Stack. Annotations can be professionally added to images using excellent tools such as LittleSnapper or Skitch. The simple hover effect enables end users to see and annotated and non-annotated version of the same image.The HoverBox stack is compatible with all major web browsers, including IE7, IE8, IE9, Safari, Opera, Chrome and Firefox. It will also work on iOS devices, but because these devices do not support hover gestures, you'll find that tapping the HoverBox reveals the rollover content instead (unless the HoverBox is set as a link, in which case it will open the link). The HoverBox effect is achieved by using a combination of CSS and some jQuery code, which provides the animation effect. You can use an unlimited number of HoverBoxes on the same page.
Setup
- After installation, drag and drop a HoverBox stack into your page. Drag and drop a text or image stack into the static content region. Then drag and drop a text or image stack into the rollover content region.
- Settings for this stack get shown on the right, in the settings panel (when the stack is selected). Background, border and layout settings get applied to the outer wrapper. HoverBox Settings are applied to the Deli stack itself, and comprise of options like height, animation effects, and overflow style. Hovering over settings with your mouse displays informational tooltips about each setting.
- If you want to set the HoverBox stack as a link, tick the link option in the settings panel. Then click the Set Link button to create a link to another page, URL or site resource. Other attributes can be applied to the link as well.
- If you prefer, instead of dropping images into the static and rollover content regions, you define images in the Static Background and Rollover Background settings. Options include a solid colour fill, an image dropped into the provided image well or sourcing a background image that is already stored online (using the warehouse option).