マウスカーソルの出入りの方向で表示、動きを変えるアニメーションです。
カーソルの入る方向で色が変わり、出た方向に動きます。
今回はCSSで色をつけていますが、backgroundに画像を指定する方法でも可能です。
アイコンなどのマウスオーバーに変化をつけることができると思います。

▼以下が実際のソースサンプルです。

$( function() {

	var Enter = function( e ) {

		var Hover = e.type === 'mouseenter',

		$box = $( this ),
		$overlay = $( '#overlay', $box ),
		overlayW = $overlay.width(),
		mouseX = e.clientX - ($box.offset().left + overlayW / 2),
		mouseY = e.clientY - ($box.offset().top + overlayW / 2),
		degrees = Math.atan2( mouseY, mouseX ) * 180 / Math.PI,
		style = {};

		if ( degrees > -135 && degrees <= -45 ) {
			style.top = -overlayW;
			style.left = 0;
			$overlay.css('background-color','red')
		} else if ( degrees > -45 && degrees <= 45 ) {
			style.top = 0;
			style.left = overlayW;
			$overlay.css('background-color','blue')			
		} else if ( degrees > 45 && degrees <= 135 ) {
			style.top = overlayW;
			style.left = 0;
			$overlay.css('background-color','green')
		} else {
			style.top = 0;
			style.left = -overlayW;
			$overlay.css('background-color','yellow')
		}

		$overlay
		.show()
		.css( {
			top: Hover ? style.top : 0,
			left: Hover ? style.left : 0,
		} )
		.stop( true )
		.animate( {
			top: Hover ? 0 : style.top,
			left: Hover ? 0 : style.left
		}, "slow");

	};
	
	var Leave = function( e ) {

		var Hover = e.type === 'mouseenter',

		$box = $( this ),
		$overlay = $( '#overlay', $box ),
		overlayW = $overlay.width(),
		mouseX = e.clientX - ($box.offset().left + overlayW / 2),
		mouseY = e.clientY - ($box.offset().top + overlayW / 2),
		degrees = Math.atan2( mouseY, mouseX ) * 180 / Math.PI,
		style = {};

		if ( degrees > -135 && degrees <= -45 ) {
			style.top = -overlayW;
			style.left = 0;
		} else if ( degrees > -45 && degrees <= 45 ) {
			style.top = 0;
			style.left = overlayW;
		} else if ( degrees > 45 && degrees <= 135 ) {
			style.top = overlayW;
			style.left = 0;
		} else {
			style.top = 0;
			style.left = -overlayW;
		}

		$overlay
		.animate( {
			top: - Hover ? 0 : style.top,
			left: - Hover ? 0 : style.left
		}, "slow");

	};


	$( '#box' )
	.on('mouseenter', Enter )
	.on('mouseleave', Leave );


	});

図形の中心を基準にして角度で方向を指定しているので、長方形の場合は計算が必要です。

▼CSS

#main {
	width:100%;
	position: absolute;
}
#box {
	margin:200px auto;
	position: relative;
	width: 200px;
	height: 200px;
    overflow: hidden;
    background: #333;
}
#overlay {
	position: absolute;
	top: 200px;
	width: 200px;
	height: 200px;
}

▼HTML

<div id="main">
  <div id="box">
    <div id="overlay"></div>
  </div>
</div>

今回、参考にさせていただいたのは、
『[JS] カーソル進入位置に合わせて変わるアニメーション – nbnote blog』さんです。
ありがとうございます。

デモページは、こちら