<div class="cursor"></div>
<div class="wrapper">
  <div class="project-list">
    <div class="project p-1">
      <div class="project-title"><h1>Motionland</h1></div>
      <div class="project-categ">Branding</div>
      <div class="project-overlay"></div>
    </div>
    <div class="project p-2">
      <div class="project-title"><h1>Focus Reactive</h1></div>
      <div class="project-categ">Photography</div>
      <div class="project-overlay"></div>
    </div>
    <div class="project p-3">
      <div class="project-title"><h1>Aspect</h1></div>
      <div class="project-categ">Web Design</div>
      <div class="project-overlay"></div>
    </div>
    <div class="project p-4">
      <div class="project-title"><h1>Logo Mark</h1></div>
      <div class="project-categ">Branding</div>
      <div class="project-overlay"></div>
    </div>
  </div>
</div>

html, body {
  margin: 0%;
  padding: 0%;
  width: 100%;
  height: 100%;
  text-transform: uppercase;
  background: #121212;
  overflow: hidden;
}

.project-title h1 {
  font-weight: 300;
}

.project-categ {
  font-weight: lighter;
}

.cursor {
  position: absolute;
  width: 600px;
  height: 400px;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -100px;
  background: url(https://i.pinimg.com/564x/85/24/d7/8524d785a8427617d475bf02d51710fc.jpg) no-repeat 50% 50%;
  background-size: cover;
  z-index: 1;
} 

.wrapper {
  width: 80%;
  margin: 180px auto;
  height: 100%;
}

.project {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-basis: 1;
  position: relative;
  z-index: 2;
  color: white;
  mix-blend-mode: difference;
}

.project-overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

var $cursor = $(".cursor"),
    $overlay = $(".project-overlay");

function moveCircle(e) {
  TweenLite.to($cursor, 0.5, {
    css: {
      left: e.pageX,
      top: e.pageY
    },
    delay: 0.03
  });
}

$(".p-1").hover(function(){
  $(".cursor").css({ "background-image": "url(https://i.pinimg.com/564x/85/24/d7/8524d785a8427617d475bf02d51710fc.jpg)" });
});

$(".p-2").hover(function(){
  $(".cursor").css({ "background-image": "url(https://i.pinimg.com/564x/97/59/85/9759859a26a8f8195d1c4dd92f00cb73.jpg)" });
});
$(".p-3").hover(function(){
  $(".cursor").css({ "background-image": "url(https://i.pinimg.com/564x/9c/52/81/9c528158c74da06541565671cfc2644b.jpg)" });
});
$(".p-4").hover(function(){
  $(".cursor").css({ "background-image": "url(https://i.pinimg.com/564x/38/18/c3/3818c31969226e29a9dabd5e3cd0802a.jpg)" });
});

var flag = false;
$($overlay).mousemove(function() {
  flag = true;
  TweenLite.to($cursor, 0.3, {scale: 1, autoAlpha: 1});
  $($overlay).on("mousemove", moveCircle);
});

$($overlay).mouseout(function() {
  flag = false;
  TweenLite.to($cursor, 0.3, {scale: 0.1, autoAlpha: 0});
});