Test #2

HTML

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

<div id="mouse_cursor" class="mouse_cursor"></div>
<div id="mouse_trail" class="mouse_trail"></div>

<div class="hover"></div>

CSS

html, body {
  background: #fff;
}


html, body {
	overflow:hidden;
	cursor:none;
}

.mouse_cursor {
	width:20px;
	height:20px;
	background:#000;
	opacity:.3;
	position:fixed;
	z-index:9999;
}

.mouse_trail {
	width:30px;
	height:30px;
	background:#ff0000;
	opacity:.3;
	position:fixed;
	z-index:9998;
}

.mouse_cursor,
.mouse_trail {
  pointer-events:none; 
}


.hover {
width:200px;
height:200px;
position:fixed;
background:#ccc;
bottom:0;
right:0;
}

.mouse_cursor_hover {
	width:300px;
	height:300px;
}

JavaScript

function moveCursor(e) {
 $('#mouse_cursor').css({'left' : e.pageX,'top' : e.pageY });
 }
$(window).on('mousemove', moveCursor);

function moveTrail(e) {
	TweenMax.to('#mouse_trail', 0.35, {
		css: {left: e.pageX,top: e.pageY},
		ease:SlowMo.easeIn
	}
)};
$(window).on('mousemove', moveTrail);

$(".hover").bind( "mouseenter mouseover", function() {
  $("#mouse_cursor").addClass("mouse_cursor_hover");
});

$(".hover").mouseleave(function() {
  $("#mouse_cursor").removeClass("mouse_cursor_hover");
});