Mouse Direction Aware Hover Effect Wit jQuery -Directional Hover

Animation
Demo    Download
Mouse Direction-aware jQuery Hover Effect Plugin - Directional Hover
File Size: 2.66 KB
Views Total: 1370 views
Last Update:January 01, 1970
Publish Date: January 01, 1970
Official Website: Go to website
License: MIT
Plugin Author:

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

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.