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: 743 views
Last Update:March 17, 2020
Publish Date: March 15, 2020
Official Website: Go to website
License: MIT

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.

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


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.