Direction-aware Hover Effect Plugin For jQuery - focus-follow

focus-follow is a small and customizable jQuery plugin which applies direction aware, responsive hover effects to your html elements for bring your user's attention to current hovered element. The goal of the plugin is to create custom CSS background or foreground overlays with radial borders on html elements that follow you focus when mouse hover.

See also:

• Direction-aware Hover Effect with jQuery SlipHover Plugin
• Image Direction-Aware Hover Effect with jQuery and CSS3
• Mouse-aware Sliding Overlays with jQuery and CSS3
• Simple jQuery Direction Aware Hover Animation Plugin - Hover Direction
• Mouse Direction-aware jQuery Hover Effect Plugin - Directional Hover

Basic usage:

1. Add jQuery JavaScript library and the jQuery focus-follow plugin to your webpages.

<script src="//code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="jquery.focus-follow.js"></script>

2. Just call the function on the target elements and done.

$("#element").focusFollow();

3. Customize the hover focus effect with the following options.

$("#element").focusFollow({

  // parent container
  wrapper: '#container',

  // overlay color
  color: "orange",

  // animation speed
  speed: 400,

  // opacity level
  opacity: 1,

  // fades out overlay
  timeout: 200,

  // margin in pixels
  margin: 2,
  margin_horizontal: 2,
  margin_vertical: 2,

  // border radius
  border_radius: auto,

  // z-index
  z_index: -1

});

---

This awesome jQuery plugin is developed by matthiasklan. For more Advanced Usages, please check the demo page or visit the official website.