<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Test Opacity </h1>
<ul id="scene" class="scene" style="position: relative;">
<li class="layer beresponsive" data-depth="0" style="position: relative; display: block; left: 0px; top: 0px; transform: translate(0px, 0px);">
<img src="http://www.bjornfloki.com/wp-content/themes/wordpress-bootstrap-master-child/images/bg-eyes.jpg" />
</li>
<li class="layer" data-depth="00" style="position: absolute; display: block; left: 0px; top: 0px; transform: translate(0px, 0px);">
<img id="gradient" src="http://www.bjornfloki.com/wp-content/themes/wordpress-bootstrap-master-child/images/empty.png" style="opacity: 0.196366554362154;" />
</li>
<li class="layer" data-depth="00" style="position: absolute; display: block; left: 0px; top: 0px; transform: translate(0px, 0px);">
<img src="http://www.bjornfloki.com/wp-content/themes/wordpress-bootstrap-master-child/images/spoon-logo-1920.png" />
</li>
</ul>
</body>
</html>
$(function () {
$(document).on("mousemove", function (e) {
var me = $("#scene"),
cx = me.offset().left + me.width() / 2,
cy = me.offset().top + me.height() / 2,
d = (Math.sqrt(Math.pow(cx, 2) + Math.pow(cy, 2))),
md = (Math.sqrt(Math.pow(e.pageX - cx, 2) + Math.pow(e.pageY - cy, 2)));
me.css('opacity', md / d);
});
});
/* Styles go here */