Smooth Interactive Hover Effect - Twitch.js

Twitch.js is a fancy responsive jQuery plugin which applies a smooth, interactive hover effect to any element based on the mouse position on mouseover and mouseout.

The smooth hover effect is based on CSS3 transitions.

How to use it:

1. Import the jquery.twitch.js into the document, after the latest jQuery library.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="jquery.twitch.js"></script>

2. Call the function on the target element.

<img class="demo" src="1.jpg" alt="">

$('.demo').twitch();

3. The element must have a position property.

.demo{
  position: relative;
}

4. The plugin also works with overlapping elements. You can specify the number of layers in the JavaScript. (Default: 0. Up to 4).

$('.demo').twitch({
  layers: 2
});

5. Set the distance the element should move on mouse hover.

$('.demo').twitch({
  distance: 20 // 1-1000
});

6. Set the transition speed.

$('.demo').twitch({
  transition: 0.2
});

7. Specify the position type of the element.

$('.demo').twitch({

  // fixed, abosolute, relative 
  positionType: "absolute"
  
});

---

This awesome jQuery plugin is developed by klynicol. For more Advanced Usages, please check the demo page or visit the official website.