Interactive Image Hover Effect With jQuery And GSAP

This is an fancy image hover effect that uses jQuery and GSAP's TweenMax.js to create an interactive motion blur effect on layered images when mouse moving.

How to use it:

1. Add images layers to the webpage as follows:

<div class="container">
  <div class="hero-section" id="hero-section-a">
    <img src="1.jpg">
  </div>
  <div class="hero-section" id="hero-section-b">
    <img src="1.jpg">
  </div>
  <div class="hero-section" id="hero-section-c">
    <img src="1.jpg">
  </div>
</div>

2. Load the necessary jQuery and TweenMax.js libraries at the end of the document.

<script src='jquery.min.js'></script> 
<script src='TweenMax.min.js'></script> 

3. The required CSS styles.

.container {
  position: relative;
  height: 100vh;
  overflow: hidden;
  width: 100%;
}

.hero-section {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  z-index: -1;
}

.hero-section img {
  position: absolute;
  opacity: 0.45;
  margin: auto;
  width: 150%;
  top: -25%;
  right: -25%;
  bottom: -25%;
  left: -25%;
}

4. The core JavaScript to active the effect.

jQuery(function( $ ){
  
  var $body=$("body"),
  $heroA=$("#hero-section-a img"),
  $heroB=$("#hero-section-b img"),
  $heroC=$("#hero-section-c img");
  
  TweenMax.set( $heroA, { transformStyle: 'preserve-3d'  });
  TweenMax.set( $heroB, { transformStyle: 'preserve-3d'  });
  TweenMax.set( $heroC, { transformStyle: 'preserve-3d'  });
  
  $body.mousemove(function(e) {
    
    var sxPos =  e.pageX / $body.width()  * 100 - 50;
    var syPos =  e.pageY / $body.height() * 100 - 50;
    console.log("x:" + sxPos + ", y:" + syPos);
    TweenMax.to( $heroA, 1, { rotationY: 0.05 * sxPos, rotationX: 0.20 * syPos, rotationZ: '-0.1', transformPerspective:500, transformOrigin:'center center' });
    TweenMax.to( $heroB, 1, { rotationY: 0.10 * sxPos, rotationX: 0.15 * syPos, rotationZ: 0, transformPerspective:500, transformOrigin:'center center' });
    TweenMax.to( $heroC, 1, { rotationY: 0.15 * sxPos, rotationX: 0.10 * syPos, rotationZ: 0.10, transformPerspective:500, transformOrigin:'center center' });

  });


});

---

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