<div class="portrait" id="portrait">
   <div class="fill cover-img"></div>
   <div class="fill z-10 hover">
      <div class="fill cover-img hover-img"></div>
   </div>
</div>

@import "compass/css3";

body{
   margin: 0;
   padding: 0;
   background-color: #222;
   --translate-x: 30px;   
   --translate-y: -20px;
}

.portrait{
   width: 80%;
   max-width: 600px;
   margin: 0 auto;
   height: 600px;
   position: relative;
   overflow: hidden;
   
   &:hover{
      .hover{         
         @include opacity(0.4);
      }
      .hover-img{
         @include transform(translate(var(--translate-x), var(--translate-y)));
      }
   }
}

.fill{
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 5;
}

.z-10{
   z-index: 10;
}

.hover{
   @include transition(all 380ms cubic-bezier(.16,.01,.77,1));
   @include opacity(0);
   //padding: 0 30px 20px 0;
}

.hover-img{   
   @include transition(opacity,transform 320ms cubic-bezier(.16,.01,.77,1));
   
   &:after{
      content: '';
      @extend .fill;
      background-color: #FFEB3B;
      mix-blend-mode: color;   //overlay, darken
   }
}

.cover-img{
   @include background-size(cover);
   background-position: top center;
   background-repeat: no-repeat;
   background-image: url(https://images.unsplash.com/photo-1486074051793-e41332bf18fc?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=7c08dc233ca06b278c5129d67cedb4c8);
}

var root = document.getElementById('portrait');

var mouse_monitor = function(e) {
   let x = e.clientX/innerWidth;
   let y = e.clientY/innerHeight;
   
   let move_x = (x>0.5) ? '-30px' : '30px';
   let move_y = (y>0.5) ? '-20px' : '20px';
   
   root.style.setProperty("--translate-x", move_x);
   root.style.setProperty("--translate-y", move_y);
}

root.addEventListener("mousemove", mouse_monitor);