Mouse Direction Aware Hover Effect Wit jQuery – Directional Hover

Animation
File Size: 2.66 KB
Views Total: 2490 views
Last Update:January 01, 1970
Publish Date: January 01, 1970
Official Website: Go to website
License: MIT
Plugin Author: im-sticky
Demo    Download

A Mouse Direction Aware Hover Effect including CSS3 and jQuery phenomenon that illustrates while changing positions of a mouse inward or outward then somehow the distinctive informative patterns come or change accordingly. These hover effects change the flap of the informative patterns of various hoverable blocks. Predominantly, the identification is also processed during the operations, and technically CSS doing all the animation inside this practice of hover effect. This is one of the eye-catching animation tricks that attract people.

Table of Contents

How to use :

Load the jQuery directional hover plugin after jQuery library :

<script src="jquery.min.js"></script>
<script src="jquery.directional-hover.min.js"></script>

Create an overlay covering the container ‘dh-container’ :

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

The essential CSS for the overlay :

.dh-container {
  position: relative;
  overflow: hidden;
}

.dh-overlay {
  position: absolute;
  top: -100%;
}

Style the overlay in the CSS :

.dh-overlay {
  background: rgba(52,73,94,.65);
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 300px;
  color: #fff;
}

Initialize the plugin with default settings :

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

Plugin default options. :

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

  // CSS class for the overlay
  overlay: "dh-overlay",

  // Linear or swing
  easing: "swing",
speed in ms
  speed: 400
  
});
Done

Thanks for make jQuery plugin is developed by im-sticky For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.

Related jQuery Plugins

You Might Also Like