🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Directional Hover is a lightweight jQuery plugin to create animated hover overlays that slide in based on mouse direction.

Hover-Effect Overlay

Documentation

jQuery Directional Hover

A jQuery plugin that slides overlays over elements based on mouse direction

Currently version 1.0.1

Installation

This plugin is available via npm (npm install jquery-directional-hover) and bower (bower install jquery-directional-hover). Or, you can just download it from this repo.

Usage

Create a container element with an overlay element inside:

<div class="dh-container"> 	<div class="dh-overlay"></div> </div>

Call the directional hover plugin on your container element:

$('.dh-container').directionalHover();

That's it! There are additional options you can use for the plugin.

Options

You can either modify the $.fn.directionalHover.defaults object or pass a new object into the .directionalHover() function.

overlay

The jQuery selector of the overlay in the container element.

Type: String

Default: .dh-overlay

easing

The jQuery easing function the overlay will use.

Type: String

Default: swing

speed

The speed in milliseconds at which the overlay will slide in and out at.

Type: Number

Default: 400

API

Coming soon...


You May Also Like