Another great gem from Zurb. What if you wanted to make a user aware of a piece of content long before their mouse directly hovers over its element? Perhaps it was a piece of content that a user would have never otherwise hovered over (thus rendering all that CSS you styled on the :hover of your class forever invisible to your user). What is a designer/developer to do?

Reactive Listener allows us to affect change over an element from a distance that otherwise would not be possible. In this example, we detect the proximity of the mouse pointer to an element which reacts more vibrantly the closer to user’s mouse comes to it. Here we use this effect to draw attention to some additional information contained in a hidden div, but many more practical uses abound, like drawing attention to a share button, or CTA.

The reactive listener is currently a prototype where the only real thing it knows how to watch for is mouse position, but the core concept is extensible, and we can imagine reacting to things like scroll, rotation, GPS, and a variety of other data sources.

Lightweight jQuery extension for creating cursor tooltips that follow mouse movement and position.

Illustration by akselkreis

A plugin developed with jQuery, that allows to dynamically zoom images with mouseover, and view details with mouse move.
Compatible with: jQuery 1.7+ in Chrome 42+, Firefox 41+, Safari 9+, Opera 29+, Internet Explorer 9+

Marginotes takes your jQuery selection and adds notes to the margin with the text provided in HTML attributes. If you don’t want to use jQuery, there’s also a version of marginotes without it.

Marginotes works by adding a desc attribute to an HTML element, which will be displayed as a tooltip:

It works with links, as well as with <span> elements.

Illustration by akselkreis

Highlight table rows and columns on hover with rowspan and colspan support.

Hide anything with a bit of blur. Hint on mouseover. Reveal on click.

The plugin create a fading effect for image on mouse over.

Transform a set of images into a Mac-like Dock menu.

Piece together an interactive picture – aka an image that contains tooltips and popup boxes.

Slick overlay effect with jQuery that does not use an overlay

Booklet is a jQuery tool for displaying content on the web in a flipbook layout.

Background Color Animations with jQuery

HoverIntent is a plug-in that attempts to determine the user’s intent.Instead of immediately calling the onMouseOver function, it waits until the user’s mouse slows down enough before making the call.

Paragraph hovering variations