Mouse Direction Aware Hover Effect Wit jQuery – Directional Hover

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