Mousemove perspective effect

index.html

<div class="js-view grid">
  <div class="js-item grid__item">
    <img src="https://images.unsplash.com/uploads/1413142095961484763cf/d141726c?dpr=2&auto=format&crop=entropy&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb" alt="" class="grid__image"/>
  <p class="grid__text">Lorem</p>
  </div>
  <div class="js-item grid__item">
    <img src="http://cdn.magdeleine.co/wp-content/uploads/2016/10/pexels-photo-131051-860x1147.jpeg" alt="" class="grid__image"/>
      <p class="grid__text">Ipsum</p>
  </div>

  <div class="js-item grid__item">
    <img src="http://cdn.magdeleine.co/wp-content/uploads/2016/10/pexels-photo-131051-860x1147.jpeg" alt="" class="grid__image"/>
     <p class="grid__text">Dolor</p>
  </div>
 
  <div class="js-item grid__item">
    <img src="http://cdn.magdeleine.co/wp-content/uploads/2016/10/pexels-photo-131051-860x1147.jpeg" alt="" class="grid__image"/>
     <p class="grid__text">Set</p>
  </div>
 
  <div class="js-item grid__item">
    <img src="https://images.unsplash.com/photo-1475446401841-97e2b596b59d?dpr=2&auto=format&crop=entropy&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb" alt="" class="grid__image"/>
  <p class="grid__text">Lorem</p>
  </div>
  <div class="js-item grid__item">
    <img src="http://magdeleine.co/wp-content/uploads/2016/10/15297800918_68c3babfc3_o-768x509.jpg" alt="" class="grid__image"/>
  <p class="grid__text">Amet</p>
  </div>
</div>

<p class="disclaimer">
  Effect inspired by <a href="http://www.de2s.fr/">DESS</a> website, designed by <a href="http://www.giovannixu.com/">Giovanni Xu</a> and coded by <a href="http://www.gbmp.me/"">Georges Benjamin</a>.</span>
</p>

script.js

//declare variables
var ticking = false,
  decimalX = 0,
  decimalY = 0;

//Get the parent element, attach mousemove listener
document.getElementsByClassName('js-view')[0].addEventListener('mousemove', cursorPositionHandler);

//Declare mousemove handler
function cursorPositionHandler(ev) {
  //Calculate amount to transform (range fron -0.5 to 0.5)
  decimalX = ev.clientX / window.innerWidth - 0.5;
  decimalY = ev.clientY / window.innerHeight - 0.5;
  
  //Request animation frame
  requestTick();
}

function requestTick() {
  //Check not already rendering
  if(!ticking) {
    requestAnimationFrame(update);
    //Set status
    ticking = true;
  }
}

function update(){
  //Animate rotations
  TweenLite.to(document.getElementsByClassName('grid__item'), 0.2, {rotationY:-60*decimalX, rotationX:60*decimalY, ease:Power2.easeOut, transformPerspective:500, transformOrigin:"center"});
  //Set status
  ticking = false;
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>

style.css

.grid {
  height: 100%;
  width: 100%;
  position: absolute;
  perspective: 200;
}

.grid__item {
  position: absolute;
  width: 400px;
  height: 200px;
  top: 200px;
  left: 200px;
  overflow: hidden;
  background-color: red;
  cursor: pointer;
}

.grid__item:hover .grid__text {
  opacity: 1;
}

.grid__item:hover .grid__text::after {
  transform: scale(1);
}

.grid__image {
  width: 100%;
}

.grid__text {
  font-family:serif;
  font-size: 4em;
  color: white;
  position: absolute;
  top: 50%;
  left: 0%;
  text-align: center;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 200ms linear;
  width: 100%;
}

.grid__text::after {
  content: '';
  position: absolute;
  width: 40px;
  bottom: 0;
  left: 50%;
  margin-left: -20px;
  transform: scale(0);
  height: 1px;
  background-color: white;
  transition: transform 100ms ease-in-out 200ms;
}

.grid__item+.grid__item {
  left: 800px;
}

.grid__item+.grid__item+.grid__item {
  left: 1400px;
}

.grid__item+.grid__item+.grid__item+.grid__item {
  left: 200px;
  top: 500px;
}

.grid__item+.grid__item+.grid__item+.grid__item+.grid__item {
  left: 800px;
  top: 500px;
}

.grid__item+.grid__item+.grid__item+.grid__item+.grid__item+.grid__item {
  left: 1400px;
  top: 500px;
}
.disclaimer{
  position: fixed;
  bottom:10px;
  left:10px;
  font-family:sans-serif;
}